import React from 'react';
import { Form, Input, Row, Col } from 'antd';
import { StateInfo, PoiIframeStateConfig, ObjectPropsSyncChange } from '@easytwin/core';

import { LockIcon, BlurInput } from '@/components';

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

type FormValuesChangeType = PoiIframeStateConfig;

const PoiIframeForm: React.FC<PoiIframeFormProp> = 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={(_, allValues: FormValuesChangeType) => {
        onChange?.(allValues);
        onChange(
          ObjectPropsSyncChange(dataSource as PoiIframeStateConfig, allValues, 'lockedSize', [
            'width',
            'height',
          ]),
        );
      }}>
      {/* 尺寸 */}
      <Form.Item label="尺寸" className="!mb-2">
        <Input.Group size="small">
          <Row gutter={8}>
            <Col span={10}>
              <Form.Item name="width" className="!mb-0">
                <BlurInput suffix="W" />
              </Form.Item>
            </Col>
            <Col span={10}>
              <Form.Item name="height" className="!mb-0">
                <BlurInput suffix="H" />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item name="lockedSize" className="!mb-0">
                <LockIcon bordered className="!w-7 !h-7" />
              </Form.Item>
            </Col>
          </Row>
        </Input.Group>
      </Form.Item>

      {/* 偏移 */}
      <Form.Item label="偏移" className="!mb-2">
        <Input.Group size="small">
          <Row gutter={8}>
            <Col span={12}>
              <Form.Item name="offsetX" className="!mb-0">
                <BlurInput suffix="X" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="offsetY" className="!mb-0">
                <BlurInput suffix="Y" />
              </Form.Item>
            </Col>
          </Row>
        </Input.Group>
      </Form.Item>
    </Form>
  );
};

export default PoiIframeForm;