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

import { StateInfo, DirectLightStateConfig } from '@easytwin/core';
import { SliderInput, ColorInput } from '@/components';

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

type FormValuesChangeType = DirectLightStateConfig;

const DirectLightForm: React.FC<DirectLightFormProp> = 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) => {
        onChange({
          ...dataSource,
          ...changedValue,
        });
      }}>
      {/* position */}
      <Form.Item label="光源位置" className="!mb-2">
        <Input.Group size="small">
          <Row gutter={8}>
            <Col span={8}>
              <Form.Item name="positionX" className="!mb-0">
                <Input size="small" suffix="X" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="positionY" className="!mb-0">
                <Input size="small" suffix="Y" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="positionZ" className="!mb-0">
                <Input size="small" suffix="Z" />
              </Form.Item>
            </Col>
          </Row>
        </Input.Group>
      </Form.Item>

      {/* target */}
      <Form.Item label="目标位置" className="!mb-2">
        <Input.Group size="small">
          <Row gutter={8}>
            <Col span={8}>
              <Form.Item name="targetX" className="!mb-0">
                <Input size="small" suffix="X" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="targetY" className="!mb-0">
                <Input size="small" suffix="Y" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="targetZ" className="!mb-0">
                <Input size="small" suffix="Z" />
              </Form.Item>
            </Col>
          </Row>
        </Input.Group>
      </Form.Item>

      {/* 颜色 */}
      <Form.Item name="color" label="颜色" className="!mb-2">
        <ColorInput />
      </Form.Item>

      {/* 强度 */}
      <Form.Item name="intensity" label="强度" className="!mb-2">
        <SliderInput min={0.1} max={2} step={0.1} />
      </Form.Item>

      {/* shadow */}
      <Form.Item name="castShadow" label="投射阴影" valuePropName="checked" className="!mb-2">
        <Checkbox />
      </Form.Item>
    </Form>
  );
};

export default DirectLightForm;