import styles from './index.less';
import { useEffect } from 'react'
import DatePickerDiy from '../DatePickerDiy';
import SeperatedDateRangePicker from '../SeperatedDateRangePicker';
import { useState } from 'react';
import CheckBoxDiy from '../CheckBoxDiy'
import Button from '../Button'

const components = {
  'DatePickerDiy': DatePickerDiy,
  'SeperatedDateRangePicker': SeperatedDateRangePicker,
  CheckBoxDiy,
};

const configExample = [
  {
    title: '时间选择',
    type: 'SeperatedDateRangePicker',
    key: 'beginTime',
    beginKey: 'beginTime',
    endKey: 'endTime',
  },
  {
    name: '点名类型',
    type: 'CheckBoxDiy',
    key: 'typeId',
    formKey: 'typeId',
  },
];

export default function FilterMenu({ formValues, onSubmit, onClose, config = configExample }) {
  const [values, setValues] = useState({});
  useEffect(() => {
    setValues(formValues);
  }, [formValues]);
  function reset() {
    onClose();
    onSubmit({});
  }
  function submit() {
    onClose();
    onSubmit(values);
  }

  return (
    <div className={styles.page}>
      {config.map(item => {
        const Cmp = components[item.type];
        if (!Cmp) return null;
        return (
          <div key={item.key} style={{margin: '0.24rem'}}>
            <Cmp
              {...item}
              values={values}
              onChange={vals => setValues(origialvals => ({ ...origialvals, ...vals }))}
            />
          </div>
        );
      })}

      <div className={styles.buttonContainer}>
        <Button inline onClick={reset}>
          重置
        </Button>
        <Button inline primary onClick={submit} style={{marginLeft: '0.24rem'}}>
          确定
        </Button>
      </div>
    </div>
  );
}
