import { ComponentInfo, DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
export interface TextComponentLayout {
  id: string;
  base?: boolean;
  showUpdate?: boolean;
  showIcon?: boolean;
  showUnit?: boolean;
}

export interface TextComponentValue {
  name: string;
  value: number;
  icon?: string;
  unit?: string;
  updateTime?: string;
  fontColor?: string;
  iconColor?: string;
  deviceName?: string;
}

export type TextComponentType =
  | 'text-component-1'
  | 'text-component-3'
  | 'text-component-4'
  | 'text-component-5';

type TextComponentDefault = TextComponentLayout;

export const TextComponent1Config: TextComponentDefault = {
  id: 'text-component-1',
  base: true,
};

export const TextComponent3Config: TextComponentDefault = {
  id: 'text-component-3',
  base: false,
  showUpdate: true,
};
export const TextComponent4Config: TextComponentDefault = {
  id: 'text-component-4',
  base: false,
  showIcon: true,
  showUpdate: true,
  showUnit: true,
};
export const TextComponent5Config: TextComponentDefault = {
  id: 'text-component-5',
  base: false,
  showIcon: true,
  showUnit: true,
};

export const TextComponentDefaultConfig: Partial<ComponentInfo> = {
  fontColor: '#000',
  unit: '℃',
  iconColor: '#367BFF',
  icon: 'shuiwen',
};

export const transformTextComponentConfig = (
  config: TextComponentDefault,
  _record: DataComponentRecord,
  dataSourceRecord: DataSource
) => {
  return {
    layout: {
      ...config,
    } as TextComponentLayout,
    value: {
      name: dataSourceRecord.attributeRename || dataSourceRecord.attribute,
      deviceName: dataSourceRecord.deviceRename || dataSourceRecord.deviceId,
      value: dataSourceRecord.componentInfo.value,
      icon: dataSourceRecord.componentInfo.icon,
      unit: dataSourceRecord.componentInfo.unit,
      updateTime: dataSourceRecord.componentInfo.updateTime,
      fontColor: dataSourceRecord.componentInfo.fontColor,
      iconColor: dataSourceRecord.componentInfo.iconColor,
    } as TextComponentValue,
  };
};