import React from 'react';
import { Form, Input, Row, Col, Select, InputNumber, Tooltip, Checkbox } from 'antd';
import { QuestionCircleOutlined } from '@easyv/react-icons';
import {
  StateInfo,
  PoiPannelStateConfig,
  FileInfo,
  FileTypeEnum,
  ObjectPropsSyncChange,
} from '@easytwin/core';

import { ColorInput, InputMessage, ProIuputNumber, CollapseBox, LockIcon } from '@/components';
import { FileCard } from '@/pages/FileManage/components';
import LIneValuesForm from './LIneValuesForm';

export interface PoiPannelFormProp {
  isGroup: boolean;
  dataSource: StateInfo['config'];
  onChange: (data: PoiPannelStateConfig) => void;
}

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

const PoiPannelForm: React.FC<PoiPannelFormProp> = function ({ isGroup, 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: PoiPannelStateConfig = {
          ...(dataSource as PoiPannelStateConfig),
          ...changedValue,
          imgFileId: (dataSource as PoiPannelStateConfig).imgFileId,
        };

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

        onChange(
          ObjectPropsSyncChange(dataSource as PoiPannelStateConfig, newData, 'lockedSize', [
            'width',
            'height',
          ]),
        );
      }}>
      {isGroup && (
        <>
          <CollapseBox
            showContextBorder
            title="背景样式"
            titleClassName="!bg-bgColorTransparent !px-0 !mb-1">
            {/* 背景图 */}
            <Form.Item name="imgFileId" label="背景图" className="!mb-2">
              <FileCard
                mode={FileTypeEnum.IMAGE}
                changedValueType="info"
                innerContextClassName="p-2"
                showDeleteBtn={false}
              />
            </Form.Item>

            {/* 尺寸 */}
            <Form.Item label="尺寸" className="!mb-0">
              <Input.Group size="small">
                <Row gutter={8}>
                  <Col span={10}>
                    <Form.Item name="width" className="!mb-0">
                      <ProIuputNumber />
                    </Form.Item>
                    <InputMessage message="宽度" />
                  </Col>
                  <Col span={10}>
                    <Form.Item name="height" className="!mb-0">
                      <ProIuputNumber />
                    </Form.Item>
                    <InputMessage message="高度" />
                  </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-0">
              <Input.Group size="small">
                <Row gutter={8}>
                  <Col span={12}>
                    <Form.Item name="paddingX" className="!mb-0">
                      <ProIuputNumber />
                    </Form.Item>
                    <InputMessage message="水平" />
                  </Col>
                  <Col span={12}>
                    <Form.Item name="paddingY" className="!mb-0">
                      <ProIuputNumber />
                    </Form.Item>
                    <InputMessage message="垂直" />
                  </Col>
                </Row>
              </Input.Group>
            </Form.Item>
          </CollapseBox>

          <CollapseBox
            showContextBorder
            title="默认行样式"
            tltleSuffix={
              <Tooltip title="在所有内容行中生效，当内容行配置独立样式后覆盖该配置。">
                <QuestionCircleOutlined className="anticon text-textColorBase" />
              </Tooltip>
            }
            titleClassName="!bg-bgColorTransparent !px-0 !mb-1">
            {/* 标签样式 */}
            <Form.Item label="标签样式" className="!mb-2">
              <Input.Group size="small">
                <Row gutter={8}>
                  <Col span={12}>
                    <Form.Item name="labelWidth" className="!mb-0">
                      <ProIuputNumber />
                    </Form.Item>
                    <InputMessage message="宽度" />
                  </Col>
                  <Col span={12}>
                    <Form.Item name="labelTextAlign" className="!mb-0">
                      <Select size="small">
                        <Select.Option value="left">左对齐</Select.Option>
                        <Select.Option value="right">右对齐</Select.Option>
                      </Select>
                    </Form.Item>
                    <InputMessage message="对齐方式" />
                  </Col>
                </Row>
              </Input.Group>
              <Input.Group size="small">
                <Row gutter={8}>
                  <Col span={15}>
                    <Form.Item name="labelFontFamily" className="!mb-0">
                      <Select size="small">
                        <Select.Option value="Noto Sans CJK SC">思源雅黑</Select.Option>
                        <Select.Option value="Microsoft YaHei">微软雅黑</Select.Option>
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col span={9}>
                    <Form.Item name="labelFontSize" className="!mb-0">
                      <InputNumber size="small" className="!w-full" />
                    </Form.Item>
                  </Col>
                </Row>
              </Input.Group>
              <Input.Group size="small">
                <Row gutter={8}>
                  <Col span={15}>
                    <Form.Item name="labelFontColor" className="!mb-0">
                      <ColorInput />
                    </Form.Item>
                  </Col>
                  <Col span={9}>
                    <Form.Item name="labelFontOpacity" className="!mb-0">
                      <Input size="small" className="!w-full" suffix="%" />
                    </Form.Item>
                  </Col>
                </Row>
              </Input.Group>
            </Form.Item>

            {/* 值样式 */}
            <Form.Item label="值样式" className="!mb0">
              <Input.Group size="small">
                <Row gutter={8}>
                  <Col span={12}>
                    <Form.Item name="valueLeftPadding" className="!mb-0">
                      <ProIuputNumber />
                    </Form.Item>
                    <InputMessage message="左间距" />
                  </Col>
                  <Col span={12}>
                    <Form.Item name="valueTextAlign" className="!mb-0">
                      <Select size="small">
                        <Select.Option value="left">左对齐</Select.Option>
                        <Select.Option value="right">右对齐</Select.Option>
                      </Select>
                    </Form.Item>
                    <InputMessage message="对齐方式" />
                  </Col>
                </Row>
              </Input.Group>
              <Input.Group size="small">
                <Row gutter={8}>
                  <Col span={15}>
                    <Form.Item name="valueFontFamily" className="!mb-0">
                      <Select size="small">
                        <Select.Option value="Noto Sans CJK SC">思源雅黑</Select.Option>
                        <Select.Option value="Microsoft YaHei">微软雅黑</Select.Option>
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col span={9}>
                    <Form.Item name="valueFontSize" className="!mb-0">
                      <InputNumber size="small" className="!w-full" />
                    </Form.Item>
                  </Col>
                </Row>
              </Input.Group>
              <Input.Group size="small">
                <Row gutter={8}>
                  <Col span={15}>
                    <Form.Item name="valueFontColor" className="!mb-0">
                      <ColorInput />
                    </Form.Item>
                  </Col>
                  <Col span={9}>
                    <Form.Item name="valueFontOpacity" className="!mb-0">
                      <Input size="small" className="!w-full" suffix="%" />
                    </Form.Item>
                  </Col>
                </Row>
              </Input.Group>
            </Form.Item>
          </CollapseBox>
        </>
      )}

      {/* 内容行 */}
      <Form.Item
        name="lineValues"
        labelCol={{
          span: 0,
        }}
        wrapperCol={{
          span: 24,
        }}
        className="!mb-0">
        <LIneValuesForm isGroup={isGroup} />
      </Form.Item>

      {/* 顶层渲染  */}
      <Form.Item label="顶层渲染" name="alwaysTop" className="!mb-2" valuePropName="checked">
        <Checkbox />
      </Form.Item>
    </Form>
  );
};

export default PoiPannelForm;