import React, { useState, useEffect, useCallback } from 'react';
import { Input, Form } from 'antd';
import { PlusCircleOutlined, DeleteOutlined } from '@easyv/react-icons';
import { ViewpointInfo, UpdateViewpointQuery } from '@easytwin/core';
import { CollapseBox, ProButton, SortableTabs } from '@/components';

type FromChangedValuesType = {
  name?: ViewpointInfo['name'];
};

export interface ViewpointManageProp {
  dataSource: ViewpointInfo[];
  selectKey?: string;
  onTabChange?: (key?: string) => void;
  onFlyTo?: () => void;
  onAdd?: () => void;
  onUpdate?: (state: Partial<UpdateViewpointQuery>, showOkMsg?: boolean) => void;
  onRemove?: (key: string) => void;
}

export default function ViewpointManage({
  dataSource,
  selectKey,
  onTabChange,
  onFlyTo,
  onAdd,
  onUpdate,
  onRemove,
}: ViewpointManageProp) {
  const [form] = Form.useForm();
  const [editData, setEditData] = useState<ViewpointInfo>();

  useEffect(() => {
    const newEditData = dataSource.find((item) => item.id === selectKey);
    if (newEditData) {
      form.setFieldsValue(newEditData);
      setEditData(newEditData);
    } else {
      setEditData(undefined);
    }
  }, [form, dataSource, selectKey]);

  const handleViewpointDataFormChange = useCallback(
    (updateValues: FromChangedValuesType) => {
      if (editData) {
        onUpdate?.({
          id: editData.id,
          ...updateValues,
          rank: 0,
        });
      }
    },
    [editData, onUpdate],
  );

  const handleTagDrapChange = (dragKey: string, rank: number) => {
    onUpdate?.(
      {
        id: dragKey,
        rank,
      },
      false,
    );
  };

  return (
    <CollapseBox
      title="镜头"
      titleExtra={
        <>
          <PlusCircleOutlined
            className="anticon hover:text-primary p-1"
            onClick={(e) => {
              e.stopPropagation();
              onAdd?.();
            }}
          />
          <DeleteOutlined
            className="anticon hover:text-primary p-1"
            onClick={(e) => {
              e.stopPropagation();

              if (editData) {
                onRemove?.(editData.id);
              }
            }}
          />
        </>
      }>
      {dataSource.length ? (
        <div className="px-4 pt-1 pb-2">
          <div className="bg-bgColorSecondary mb-4">
            <SortableTabs
              dataSource={dataSource}
              selectKey={selectKey}
              onTabChange={onTabChange}
              onDragChange={handleTagDrapChange}
            />
          </div>
          {editData ? (
            <Form
              form={form}
              labelCol={{
                span: 6,
              }}
              wrapperCol={{
                span: 18,
              }}
              labelAlign="left"
              colon={false}
              onValuesChange={handleViewpointDataFormChange}
              onFinish={() => handleViewpointDataFormChange({})}>
              <Form.Item name="name" label="镜头名称" className="!mb-2">
                <Input size="small" className="text-xs" />
              </Form.Item>

              <Form.Item name="data" label=" " className="!mb-2">
                <div className="flex gap-x-2">
                  <ProButton block type="primary" size="small" onClick={form.submit}>
                    更新镜头
                  </ProButton>
                  <ProButton block proType="subPrimary" size="small" onClick={onFlyTo}>
                    聚焦镜头
                  </ProButton>
                </div>
              </Form.Item>
            </Form>
          ) : (
            <div className="px-4 py-6 text-center text-textColorSecondary">可选择镜头预览视角</div>
          )}
        </div>
      ) : (
        <div className="px-4 py-6 text-center text-textColorSecondary">
          <span>未配置镜头，点击</span>
          <PlusCircleOutlined
            className="anticon !text-white !hover:text-primary p-1 cursor-pointer"
            onClick={(e) => {
              e.stopPropagation();
              onAdd?.();
            }}
          />
          <span>创建</span>
        </div>
      )}
    </CollapseBox>
  );
}