import { Form, Spin } from 'antd';
import { memo, useEffect, useState } from 'react';
import BindDataFrom from '../BindData/BindDataFrom';

const FlagStep = ({
  dataInitFetch,
  show,
  isHaveDate,
  dataLoading,
  dataSelectMap,
  dataFlagList,
  dataGetSelectOptions,
}) => {
  const [activeKey, setActiveKey] = useState<string[] | string>([]);
  useEffect(() => {
    if (show) {
      dataInitFetch();
    }
  }, [show]);
  useEffect(() => {
    setActiveKey(dataFlagList?.map((flag) => `${flag?.id}`) || []);
  }, [dataFlagList]);
  return (
    <Spin spinning={dataLoading}>
      <Form.Item name="flags">
        <BindDataFrom
          isHaveDate={isHaveDate}
          activeKey={activeKey}
          setActiveKey={setActiveKey}
          selectMap={dataSelectMap}
          flagList={dataFlagList}
          getSelectOptions={dataGetSelectOptions}
        />
      </Form.Item>
    </Spin>
  );
};
export default memo(FlagStep);
// , (prevprops, nextprops) => {
//     return (prevprops.show === nextprops.show) &&
// }