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

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

export interface TeamplateComponenterConfigProp {
  //
  componentDetail: ComponentInfo;
  onBaseFormValuesChange?: (values: Partial<UpdateComponentQuery>) => void;
  //
  stateList: StateInfo[];
  stateSelectKey?: string;
  onStateTabChange?: (key?: string) => void;
  onUpdateState?: (state: Partial<UpdateStateQuery>) => void;
}

const TeamplateComponenterConfig: React.FC<TeamplateComponenterConfigProp> = function ({
  //
  componentDetail,
  onBaseFormValuesChange,
  //
  stateList,
  stateSelectKey,
  onStateTabChange,
  onUpdateState,
}) {
  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">
        {/* config */}
        {componentDetail.commonConfig.config && (
          <ConfigForm
            type={ComponentTypeEnum[componentDetail.type]}
            dataSource={componentDetail.commonConfig.config}
            onValuesChange={(value) =>
              onBaseFormValuesChange?.({
                ...value,
                id: componentDetail.id,
              })
            }
          />
        )}

        {/* state */}
        {componentDetail.type === ComponentTypeEnum.POIPANNEL && (
          <StateManage
            showExtraBth={false}
            type={StateTypeEnum[componentDetail.type]}
            isGroup={false}
            dataSource={stateList}
            selectKey={stateSelectKey}
            onTabChange={onStateTabChange}
            onUpdate={onUpdateState}
          />
        )}

        {/* attribute */}
        <AttributeForm
          dataSource={componentDetail}
          isGroup={false}
          onValuesChange={onBaseFormValuesChange}
        />
      </div>
    </div>
  );
};

export default TeamplateComponenterConfig;