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

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

export interface ModelFormProp {
  dataSource: StateConfig;
  onChange: (data: ModelStateConfig) => void;
}

type FormValuesChangeType = Partial<ModelStateConfig>;

export default function ModelForm({ dataSource, onChange }: ModelFormProp) {
  const [form] = Form.useForm();

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

  const handleVlaueChange = (changedValue: FormValuesChangeType) => {
    onChange?.(
      ObjectPropsSyncChange(
        dataSource as ModelStateConfig,
        { ...dataSource, ...changedValue } as ModelStateConfig,
        'lockedScale',
        ['scaleX', 'scaleY', 'scaleZ'],
      ),
    );
  };

  return (
    <Form
      form={form}
      className="!px-1"
      labelCol={{
        span: 6,
      }}
      wrapperCol={{
        span: 18,
      }}
      labelAlign="left"
      colon={false}
      onValuesChange={handleVlaueChange}>
      {/* position */}
      <Form.Item label="位置" className="!mb-2">
        <Input.Group size="small">
          <Row gutter={8}>
            <Col span={8}>
              <Form.Item name="positionX" className="!mb-0">
                <BlurInput suffix="X" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="positionY" className="!mb-0">
                <BlurInput suffix="Y" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="positionZ" className="!mb-0">
                <BlurInput suffix="Z" />
              </Form.Item>
            </Col>
          </Row>
        </Input.Group>
      </Form.Item>

      {/* rotation */}
      <Form.Item label="旋转" className="!mb-2">
        <Input.Group size="small">
          <Row gutter={8}>
            <Col span={8}>
              <Form.Item name="rotationX" className="!mb-0">
                <BlurInput suffix="X" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="rotationY" className="!mb-0">
                <BlurInput suffix="Y" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="rotationZ" className="!mb-0">
                <BlurInput suffix="Z" />
              </Form.Item>
            </Col>
          </Row>
        </Input.Group>
      </Form.Item>

      {/* scale */}
      <Form.Item
        label={
          <span className="flex gap-x-6 items-center">
            <span>缩放</span>
            <LockIcon
              value={(dataSource as ModelStateConfig).lockedScale}
              onClick={(lockedScale) =>
                handleVlaueChange({
                  lockedScale,
                })
              }
            />
          </span>
        }
        className="!mb-2">
        <Input.Group size="small">
          <Row gutter={8}>
            <Col span={8}>
              <Form.Item name="scaleX" className="!mb-0">
                <BlurInput suffix="X" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="scaleY" className="!mb-0">
                <BlurInput suffix="Y" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="scaleZ" className="!mb-0">
                <BlurInput suffix="Z" />
              </Form.Item>
            </Col>
          </Row>
        </Input.Group>
      </Form.Item>
    </Form>
  );
}