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

import { ViewpointManage } from '../..';
import { BaseForm } from '../_components';

export interface BizGroupConfigProp {
  //
  component: ComponentInfo;
  onBaseFormValuesChange?: (values: UpdateComponentQuery) => 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 BizGroupConfig: React.FC<BizGroupConfigProp> = function ({
  //
  component,
  onBaseFormValuesChange,
  //
  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">
          <FolderFilled className="anticon" />
        </span>
        <span>分组</span>
      </div>
      {/* form */}
      <div className="flex-auto overflow-y-auto py-2">
        <BaseForm dataSource={component} onValuesChange={onBaseFormValuesChange} />

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

export default BizGroupConfig;