import React from 'react';
import { Form, Input, Col, Row } from 'antd';

import { StateInfo, PoiImageStateConfig, FileInfo, FileTypeEnum } from '@easytwin/core';
import { FileCard } from '@/pages/FileManage/components';

export interface PoiImageFormProp {
  dataSource: StateInfo['config'];
  onChange: (data: PoiImageStateConfig) => void;
}

type FormValuesChangeType = Omit<PoiImageStateConfig, 'imgFileId'> & {
  imgFileId: FileInfo;
};

const PoiImageForm: React.FC<PoiImageFormProp> = function ({ dataSource, onChange }) {
  const [form] = Form.useForm();

  React.useEffect(() => {
    form.setFieldsValue(dataSource);
  }, [form, dataSource]);

  return (
    <Form
      form={form}
      className="!px-1"
      labelCol={{
        span: 6,
      }}
      wrapperCol={{
        span: 18,
      }}
      labelAlign="left"
      colon={false}
      onValuesChange={(changedValue: FormValuesChangeType) => {
        const { imgFileId } = changedValue;

        const newData: PoiImageStateConfig = {
          ...(dataSource as PoiImageStateConfig),
          ...changedValue,
          imgFileId: (dataSource as PoiImageStateConfig).imgFileId,
        };

        if (imgFileId) {
          newData.imgFileId = imgFileId.id;
          newData.imgFileUrl = imgFileId.url;
        }

        onChange(newData);
      }}>
      {/* 缩放 */}
      <Form.Item label="缩放" className="!mb-2">
        <Input.Group size="small">
          <Row gutter={8}>
            <Col span={12}>
              <Form.Item name="scaleX" className="!mb-0">
                <Input size="small" suffix="W" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="scaleY" className="!mb-0">
                <Input size="small" suffix="H" />
              </Form.Item>
            </Col>
          </Row>
        </Input.Group>
      </Form.Item>

      {/* imgFile */}
      <Form.Item name="imgFileId" label="图片源" className="!mb-2">
        <FileCard
          mode={FileTypeEnum.IMAGE}
          changedValueType="info"
          innerContextClassName="p-2"
          showDeleteBtn={false}
        />
      </Form.Item>
    </Form>
  );
};

export default PoiImageForm;