import { Flex } from 'antd';
import React, { useEffect, useState } from 'react';
import { ChildrenModalMethods } from '../../type';

import BaseDatePicker, { createDate } from '../../components/BaseDatePicker';
import styles from './index.less';
import Info from './Info';
import ListTable from './ListTable';
import Trend from './Trend';
import TypeTop3 from './TypeTop3';

export type LightingFaultDisposalProps = {
  modalDispatch: ChildrenModalMethods;
};

/** @name 市管照明故障处置情况 */
const LightingFaultDisposal: React.FC<LightingFaultDisposalProps> = (props) => {
  const { modalDispatch } = props;

  const [date, setDate] = useState(createDate('yesterday'));

  useEffect(() => {
    modalDispatch.setOptions({
      headerLeft: () => {
        return (
          <BaseDatePicker
            dateRange={['yesterday', 'month']}
            value={date}
            onChange={(val) => {
              setDate(val);
            }}
          />
        );
      },
    });
  }, [date]);

  return (
    <div className={styles.container}>
      <Flex gap={20}>
        <Flex vertical gap={20}>
          <Info date={date}></Info>
          <Trend date={date}></Trend>
          <TypeTop3 date={date}></TypeTop3>
        </Flex>
        <ListTable date={date} modalDispatch={modalDispatch}></ListTable>
      </Flex>
    </div>
  );
};

export default LightingFaultDisposal;
