import React from 'react';
import { AdditionalLayersOutlined } from '@easyv/react-icons';
import {
  ComponentInfo,
  ComponentDetailInfo,
  UpdateComponentQuery,
  ViewpointInfo,
  UpdateViewpointQuery,
  StateTypeEnum,
  StateInfo,
  UpdateStateQuery,
} from '@easytwin/core';

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

export interface TeamplateGroupConfigProp {
  //
  component: ComponentInfo;
  onBaseFormValuesChange?: (values: UpdateComponentQuery) => void;
  //
  stateList: StateInfo[];
  stateSelectKey?: string;
  onStateTabChange?: (key?: string) => void;
  onAddState?: () => void;
  onUpdateState?: (state: Partial<UpdateStateQuery>) => void;
  onRemoveState?: (key: string) => void;
  //
  viewpointList: ViewpointInfo[];
  viewpointSelectKey?: string;
  onViewpointTabChange?: (key?: string) => void;
  onViewpointFlyTo?: () => void;
  onAddViewpoint?: () => void;
  onUpdateViewpoint?: (state: Partial<UpdateViewpointQuery>, showOkMsg?: boolean) => void;
  onRemoveViewpoint?: (key: string) => void;
}

const TeamplateGroupConfig: React.FC<TeamplateGroupConfigProp> = function ({
  //
  component,
  onBaseFormValuesChange,
  //
  stateList,
  stateSelectKey,
  onStateTabChange,
  onAddState,
  onUpdateState,
  onRemoveState,
  //
  viewpointList,
  viewpointSelectKey,
  onViewpointTabChange,
  onViewpointFlyTo,
  onAddViewpoint,
  onUpdateViewpoint,
  onRemoveViewpoint,
}) {
  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">
          <AdditionalLayersOutlined className="anticon" />
        </span>
        <span>数字要素_母版</span>
      </div>
      {/* form */}
      <div className="flex-auto overflow-y-auto py-2">
        <BaseForm dataSource={component} onValuesChange={onBaseFormValuesChange} />

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

        <ViewpointManage
          dataSource={viewpointList}
          selectKey={viewpointSelectKey}
          onTabChange={onViewpointTabChange}
          onFlyTo={onViewpointFlyTo}
          onAdd={onAddViewpoint}
          onUpdate={onUpdateViewpoint}
          onRemove={onRemoveViewpoint}
        />
        <AttributeForm isGroup dataSource={component} onValuesChange={onBaseFormValuesChange} />
      </div>
    </div>
  );
};

export default TeamplateGroupConfig;