import React, { useMemo } from 'react';
import Wrap from '../wrap/Wrap';
import { Select } from 'antd';
import { CaretDownOutlined } from '@ant-design/icons';
import '../g.scss';
const { Option } = Select;

function TwoSelect(props: ITwoSelect) {
  const {
    oneValue,
    twoValue,
    oneSelectList=[],
    twoSelectList=[],
    change,
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const returnOption = (rest: ISelect) => {
    if (typeof rest.value === 'number') {
      return (
        <Option key={rest.value} value={rest.value}>
          {rest.value}
        </Option>
      );
    } else {
      return (
        <Option key={rest.value} value={rest.value}>
          {rest.value}
        </Option>
      );
    }
  };

  const Redio = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className="zl-large-screen-two-select">
          <Select
            size="middle"
            value={oneValue}
            onChange={(value) => change?.(value, 'onevalueselect')}
            dropdownClassName='zl-large-screen-select'
            suffixIcon={
              <CaretDownOutlined
                style={{ color: '#fff' }}
                defaultValue={oneValue}
              />
            }
          >
            {Array.isArray(oneSelectList) &&
              oneSelectList?.length > 0 &&
              oneSelectList?.map((item) => {
                return returnOption(item);
              })}
          </Select>
          <Select
            size="middle"
            value={twoValue}
            onChange={(value) => change?.(value, 'twovalueselect')}
            dropdownClassName='zl-large-screen-select'
            suffixIcon={
              <CaretDownOutlined
                style={{ color: '#fff' }}
                defaultValue={twoValue}
              />
            }
            style={{ marginLeft: '15px' }}
          >
            {Array.isArray(twoSelectList) &&
              twoSelectList?.length > 0 &&
              twoSelectList?.map((item) => {
                return returnOption(item);
              })}
          </Select>
        </div>
      </Wrap>
    );
  }, [oneValue, twoValue, oneSelectList, twoSelectList]);

  return Redio;
}

export default TwoSelect;

export interface ITwoSelect {
  change?: Function;
  oneValue?: string;
  twoValue?: string;
  oneSelectList?: ISelect[];
  twoSelectList?: ISelect[];
  wrapStyle?: React.CSSProperties;
}
export interface ISelect {
  key: string;
  value?: string;
}