import { CloseOutlined } from '@ant-design/icons';
import { InputNumber, Select } from 'antd';
import { Canvas } from '../new-build';
import styles from '../index.module.scss';
import { models } from 'src/const/container';

const { Option } = Select;

interface SizeProps {
  value?: Canvas;
  onChange?: (value: Canvas) => void;
}

const Size: React.FC<SizeProps> = ({ value, onChange }) => {
  return (
    <>
      <Select
        defaultValue={models[0].key}
        onChange={key => {
          const modal = models.find(modal => modal.key === key);
          onChange?.({
            key: modal?.key || 'custom',
            width: modal?.width || value?.width || '0',
            height: modal?.height || value?.height || '0',
          });
        }}
      >
        <>
          <Option value="custom">自定义</Option>
          {models.map(({ key }) => {
            return (
              <Option value={key} key={key}>
                {key}
              </Option>
            );
          })}
        </>
      </Select>
      <div className={styles.inputNumbers}>
        <InputNumber
          min={0}
          value={value?.width ?? 0}
          formatter={value => `${value}px`}
          disabled={value?.key !== 'custom'}
          parser={value => value?.replace('px', '') || ''}
          onChange={width => {
            if (width) {
              onChange?.({
                key: 'custom',
                width: `${String(width)}`,
                height: value?.height || '0',
              });
            }
          }}
        />
        <span className={styles.close}>
          <CloseOutlined />
        </span>
        <InputNumber
          min={0}
          value={value?.height ?? 0}
          formatter={value => `${value}px`}
          disabled={value?.key !== 'custom'}
          parser={value => value?.replace('px', '') || ''}
          onChange={height => {
            if (height) {
              onChange?.({
                key: 'custom',
                width: value?.width || '0',
                height: `${String(height)}`,
              });
            }
          }}
        />
      </div>
    </>
  );
};

export default Size;