import React, { useEffect } from 'react';
import {
  BatchModelComponentConfig,
  ComponentInfo,
  ObjectPropsSyncChange,
  UpdateComponentQuery,
} from '@easytwin/core';
import { BatchModelOutlined } from '@easyv/react-icons';
import { Form, Input, Row, Col, Switch } from 'antd';
import { ProIuputNumber, LockIcon, BlurInput } from '@/components';

interface BatchModelConfig {
  component: ComponentInfo;
  onFormValuesChange?: (values: Partial<UpdateComponentQuery>) => void;
}
export default function(props: BatchModelConfig) {
  const [form] = Form.useForm();

  const {
    component: {
      name,
      commonConfig,
      commonConfig: { config },
    },
    onFormValuesChange,
  } = props;

  const {
    mode,
    scaleSingle,
    scaleSingle: { locked: lockSingle },
    scaleTotal,
    scaleTotal: { locked: lockTotal },
  } = config as BatchModelComponentConfig;

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

  return (
    <div className="h-full flex flex-col">
      {/* title */}
      <div className="p-3 border-b border-b-1 border-borderColorBase">
        <div className="text-white inline-flex items-center gap-x-2">
          <span className="text-primary text-base anticon">
            <BatchModelOutlined className="anticon" />
          </span>
          <span>批量创建_</span>
        </div>
        <div>批量创建模型体(指定个数)</div>
      </div>
      {/* form */}
      <div className="flex-auto overflow-y-auto py-2 px-4">
        <Form
          className="!px-1"
          form={form}
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          labelAlign="left"
          colon={false}
          onValuesChange={(_, allValues) => {
            if (_.scaleSingle) {
              console.log(
                ObjectPropsSyncChange(scaleSingle, _.scaleSingle, 'locked', ['x', 'y', 'z']),
              );

              onFormValuesChange?.({
                commonConfig: {
                  ...commonConfig,
                  config: {
                    ...allValues,
                    scaleSingle: ObjectPropsSyncChange(
                      scaleSingle,
                      { ...scaleSingle, ..._.scaleSingle },
                      'locked',
                      ['x', 'y', 'z'],
                    ),
                  },
                },
              });
            }
            if (_.scaleTotal) {
              onFormValuesChange?.({
                commonConfig: {
                  ...commonConfig,
                  config: {
                    ...allValues,
                    scaleTotal: ObjectPropsSyncChange(
                      scaleTotal,
                      { ...scaleTotal, ..._.scaleTotal },
                      'locked',
                      ['x', 'y', 'z'],
                    ),
                  },
                },
              });
            }
          }}>
          {/* scale */}
          <Form.Item
            label={
              <span className="flex gap-x-6 items-center">
                <span>整体缩放</span>
                <LockIcon
                  value={lockTotal}
                  onClick={(lockedScale) => {
                    onFormValuesChange?.({
                      commonConfig: {
                        ...commonConfig,
                        config: {
                          ...config,
                          scaleTotal: {
                            ...scaleTotal,
                            locked: lockedScale,
                          },
                        },
                      },
                    });
                  }}
                />
              </span>
            }
            className="!mb-2">
            <Input.Group size="small">
              <Row gutter={8}>
                <Col span={8}>
                  <Form.Item name={['scaleTotal', 'x']} className="!mb-0">
                    <BlurInput suffix="X" />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item name={['scaleTotal', 'y']} className="!mb-0">
                    <BlurInput suffix="Y" />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item name={['scaleTotal', 'z']} 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={lockSingle}
                  onClick={(lockedScale) => {
                    const value = form.getFieldsValue();
                    onFormValuesChange?.({
                      commonConfig: {
                        ...commonConfig,
                        config: {
                          ...config,
                          scaleSingle: {
                            ...scaleSingle,
                            locked: lockedScale,
                          },
                        },
                      },
                    });
                  }}
                />
              </span>
            }
            className="!mb-2">
            <Input.Group size="small">
              <Row gutter={8}>
                <Col span={8}>
                  <Form.Item name={['scaleSingle', 'x']} className="!mb-0">
                    <BlurInput suffix="X" />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item name={['scaleSingle', 'y']} className="!mb-0">
                    <BlurInput suffix="Y" />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item name={['scaleSingle', 'z']} className="!mb-0">
                    <BlurInput suffix="Z" />
                  </Form.Item>
                </Col>
              </Row>
            </Input.Group>
          </Form.Item>
          {mode !== 'gapless' && (
            <Form.Item
              label={<span className="flex gap-x-6 items-center">模型个数</span>}
              name="count"
              className="!mb-0">
              <ProIuputNumber />
            </Form.Item>
          )}
          <Form.Item
            label={<span className="flex gap-x-6 items-center">闭合线路</span>}
            name="close"
            valuePropName="checked">
            <Switch size="small" />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};