/*
 * @Author: zhoux zhouxia@supervision.ltd
 * @Date: 2023-12-25 16:14:04
 * @LastEditors: zhoux zhouxia@supervision.ltd
 * @LastEditTime: 2023-12-29 15:36:39
 * @FilePath: \general-ai-platform-web\src\pages\FabricView\Room\components\ModelTipBox.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useState } from 'react';

const modelOptionList: Record<string, any>[] = [
  {
    id: '0',
    label: '在线',
    status: 'watchOnline',
    color: '#52C41A',
  },
  {
    id: '1',
    label: '离线',
    status: 'watchOutline',
    color: '#CCCCCC',
  },
  {
    id: '2',
    label: '故障',
    status: 'watchWarn',
    color: '#FAAD14',
  },
  {
    id: '3',
    label: '告警',
    status: 'watchError',
    color: '#E80D0D',
  },
];

type ModelTipBoxProps = {
  options?: Record<string, any>[]; 
  changeStatusSelected: (arr: string[]) => void
};

const ModelTipBox: React.FC<ModelTipBoxProps> = (props) => {
  const [selected, setSelected] = useState<string[]>([]);
  function doSelected(options: Record<string, any>) {
    let currSelectedArr: string[] = []
    if (selected.includes(options.status)) {
      currSelectedArr = selected.filter((item) => options.status != item)
    } else {
      currSelectedArr =  [...selected, options.status]
    }
    setSelected(currSelectedArr);
    props.changeStatusSelected(currSelectedArr)
  }
  return (
    <ul
      style={{
        display: 'flex',
        width: 100,
        height: 200,
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column',
        background: 'white'
      }}
    >
      {modelOptionList.map((item) => {
        const activeStyle: React.CSSProperties = selected.includes(item.status)
          ? {
              border: '1px solid #154DDD',
              background: '#154DDD',
              color: 'white',
            }
          : {
              border: '1px solid #DCDCDC',
              color: '#333',
            };
        return (
          <li
            key={item.id}
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              borderRadius: 2,

              padding: '4px 6px',
              marginBottom: 12,
              width: 50,
              cursor: 'pointer',
              ...activeStyle,

            }}
            onClick={() => doSelected(item)}
          >
            <span
              style={{
                width: 6,
                height: 6,
                borderRadius: '50%',
                background: item.color,
              }}
            ></span>
            <span style={{ paddingLeft: 2 }}>{item.label}</span>
          </li>
        );
      })}
    </ul>
  );
};

export default ModelTipBox;
