import React from 'react';
import { Form, Radio, Checkbox } from 'antd';

import {
  ModelAnimationPlayNumEnum,
  AnimationInfo,
  UpdateAnimationQuery,
  AnimationConfig,
} from '@easytwin/core';
import { CollapseBox, SortableTabs, SliderInput } from '@/components';

export interface AnimationManageProp {
  dataSource: AnimationInfo[];
  selectKey?: string;
  onTabChange?: (key: string) => void;
  onUpdate?: (info: UpdateAnimationQuery) => void;
}

type FormValuesChangeType = Omit<UpdateAnimationQuery, 'id'>;

const AnimationManage: React.FC<AnimationManageProp> = function ({
  dataSource,
  selectKey,
  onTabChange,
  onUpdate,
}) {
  const [form] = Form.useForm();
  const [editData, setEditData] = React.useState<AnimationConfig>();

  const newEditData = dataSource.find((item) => item.id === selectKey);

  React.useEffect(() => {
    if (newEditData) {
      form.setFieldsValue(newEditData.config);
      setEditData(newEditData.config);
    } else {
      setEditData(undefined);
    }
  }, [form, newEditData]);

  const handleTagDrapChange = (dragKey: string, rank: number) => {
    const dragData = dataSource.find((item) => item.id === dragKey);

    dragData &&
      onUpdate?.({
        id: dragData.id,
        rank,
      });
  };

  return (
    <CollapseBox title="模型动画">
      {dataSource.length ? (
        <div className="px-3 py-2">
          <div className="bg-bgColorSecondary mb-4">
            <SortableTabs
              dataSource={dataSource}
              selectKey={selectKey}
              onTabChange={onTabChange}
              onDragChange={handleTagDrapChange}
            />
          </div>
          {editData && (
            <>
              {/*  */}
              <Form
                form={form}
                className="!px-1"
                labelCol={{
                  span: 6,
                }}
                wrapperCol={{
                  span: 18,
                }}
                labelAlign="left"
                colon={false}
                onValuesChange={(changedValues: FormValuesChangeType) => {
                  newEditData?.id &&
                    onUpdate?.({
                      id: newEditData.id,
                      config: { ...newEditData?.config, ...changedValues },
                    });
                }}>
                {/* 自动播放 */}
                <Form.Item
                  name="autoPlay"
                  label="自动播放"
                  valuePropName="checked"
                  className="!mb-2">
                  <Checkbox />
                </Form.Item>

                {/* 播放次数 */}
                <Form.Item name="playNum" label="播放次数" className="!mb-2">
                  <Radio.Group className="!w-full">
                    <Radio.Button
                      className="w-1/2 text-center"
                      value={ModelAnimationPlayNumEnum.ONE}>
                      一次
                    </Radio.Button>
                    <Radio.Button
                      className="w-1/2 text-center"
                      value={ModelAnimationPlayNumEnum.LOOP}>
                      循环
                    </Radio.Button>
                  </Radio.Group>
                </Form.Item>

                {/* 播放速度 */}
                <Form.Item name="timeScale" label="播放速度" className="!mb-2">
                  <SliderInput min={0.1} max={20} step={0.1} />
                </Form.Item>
              </Form>
            </>
          )}
        </div>
      ) : (
        <div className="px-4 py-6 text-textColorSecondary">未读取到动画列表</div>
      )}
    </CollapseBox>
  );
};

export default AnimationManage;