import { Tabs } from 'antd';
import CustomCheckGroup from '../CustomCheckGroup';
import { getProvincesOptions, getCountryOptions } from './const';
import { useEffect, useState } from 'react';
import './index.less';
import { useIntl } from 'umi';

type AreaSelectItemProps = { inside?: string[]; outside?: string[] };
type AreaSelectProps = {
  value?: AreaSelectItemProps;
  onChange?: (value: AreaSelectItemProps) => void;
};
const AreaSelect = ({ value, onChange }: AreaSelectProps) => {
  const [inside, setInside] = useState(value?.inside || []);
  const [outside, setOutside] = useState(value?.outside || []);
  const { formatMessage } = useIntl();
  useEffect(() => {
    onChange?.({
      inside,
      outside,
    });
  }, [inside, outside]);
  return (
    <div className="card-container">
      <Tabs tabPosition="left" type="card">
        <Tabs.TabPane tab={formatMessage({ id: 'component.within.China' })} key="inside">
          <CustomCheckGroup
            options={getProvincesOptions(formatMessage)}
            value={inside}
            onChange={(val) => setInside(val as string[])}
          />
        </Tabs.TabPane>
        <Tabs.TabPane tab={formatMessage({ id: 'component.outside.China' })} key="outside">
          <CustomCheckGroup
            options={getCountryOptions(formatMessage)}
            value={outside}
            onChange={(val) => setOutside(val as string[])}
          />
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
};
export default AreaSelect;