import React from 'react';
import { ModelOutlined } from '@easyv/react-icons';
import {
  ComponentInfo,
  ComponentDetailInfo,
  UpdateComponentQuery,
  StateTypeEnum,
  UpdateStateQuery,
  AnimationInfo,
  UpdateAnimationQuery,
  UpdateViewpointQuery,
  ComponentTypeEnum,
} from '@easytwin/core';

import { StateManage, AnimationManage, ViewpointManage } from '../..';
import { BaseForm } from '../_components';

export interface BaseComponenterConfigProp {
  component: ComponentInfo;
  onBaseFormValuesChange?: (values: UpdateComponentQuery) => void;
  stateSelectKey?: string;
  onStateTabChange?: (key?: string) => void;
  onAddState?: () => void;
  onUpdateState?: (state: Partial<UpdateStateQuery>) => void;
  onRemoveState?: (key: string) => void;
  animationList: AnimationInfo[];
  animationSelectKey?: string;
  onAnimationTabChange?: (key?: string) => void;
  onUpdateAnimation?: (info: UpdateAnimationQuery) => void;
  viewpointSelectKey?: string;
  onViewpointTabChange?: (key?: string) => void;
  onViewpointFlyTo?: () => void;
  onAddViewpoint?: () => void;
  onUpdateViewpoint?: (state: Partial<UpdateViewpointQuery>, showOkMsg?: boolean) => void;
  onRemoveViewpoint?: (key: string) => void;
}

export default function BaseComponenterConfig({
  component,
  stateSelectKey,
  animationList,
  animationSelectKey,
  viewpointSelectKey,
  onBaseFormValuesChange,
  onStateTabChange,
  onAddState,
  onUpdateState,
  onRemoveState,
  onAnimationTabChange,
  onUpdateAnimation,
  onViewpointTabChange,
  onViewpointFlyTo,
  onAddViewpoint,
  onUpdateViewpoint,
  onRemoveViewpoint,
}: BaseComponenterConfigProp) {
  return (
    <div className="h-full flex flex-col">
      {/* title */}
      <div className="p-3 text-white inline-flex items-center gap-x-2 border-b border-b-1 border-borderColorBase">
        <span className="text-primary text-base anticon">
          <ModelOutlined className="anticon" />
        </span>
        <span>孪生体</span>
      </div>
      {/* form */}
      <div className="flex-auto overflow-y-auto py-2">
        <BaseForm dataSource={component} onValuesChange={onBaseFormValuesChange} />

        <StateManage
          type={StateTypeEnum[component.type]}
          isGroup={false}
          dataSource={component.stateConfig}
          selectKey={stateSelectKey}
          onTabChange={onStateTabChange}
          onAdd={onAddState}
          onUpdate={onUpdateState}
          onRemove={onRemoveState}
        />

        {component.type === ComponentTypeEnum.MODEL && (
          <>
            <AnimationManage
              dataSource={component.animationConfig}
              selectKey={animationSelectKey}
              onTabChange={onAnimationTabChange}
              onUpdate={onUpdateAnimation}
            />

            <ViewpointManage
              dataSource={component.viewpointConfig}
              selectKey={viewpointSelectKey}
              onTabChange={onViewpointTabChange}
              onFlyTo={onViewpointFlyTo}
              onAdd={onAddViewpoint}
              onUpdate={onUpdateViewpoint}
              onRemove={onRemoveViewpoint}
            />
          </>
        )}
      </div>
    </div>
  );
}