/* eslint-disable */
import React, { PureComponent } from "react";
import styles from "./index.less";

export default class ColorInfo extends PureComponent {
  colorContentItem = (item,language) => {

    const title =language ==='sEnglish'? item?.sEnglishName : language === 'sBig5'? item?.sBig5Name:  item?.sName;
    const info = Array.isArray(item?.sColor) ? item.sColor.filter(Boolean) : [];
    return (
      <>
        <div className={styles.colorInfo}>
          <div style={{ fontWeight: "bold", marginRight: 10 }}>{title}:</div>
          <div style={{ display: "flex", flexWrap: "wrap", flex: 1 }}>
            {info.map((i, index) => (
              <div style={{ marginRight: 15 }}>
                <input
                  type="color"
                  value={i?.sColor}
                  disabled
                  name={index}
                  id={index}
                  style={{
                    marginRight: 5,
                    width: 15,
                    height: 15,
                    padding: 0,
                    verticalAlign: "middle"
                  }}
                />
                <label for={index} style={{ fontSize: 10 }}>
                  {language ==='sEnglish'? i.sEnglishName : language === 'sBig5'? i.sBig5Name: i.sName}
                </label>
              </div>
            ))}
          </div>
        </div>
      </>
    );
  };

  colorContent = () => {
    const { masterConfig, app } = this.props;
    const {userinfo} = app;
    const language = userinfo.sLanguage;
    try {
      const result = JSON.parse(masterConfig.sTableColorTs);
      if (!Array.isArray(result)) return;
      return result.map(i => this.colorContentItem(i, language));
    } catch (error) {
      return [];
    }
  };

  render() {
    return (
      <div
        className="colorInfo"
        style={{
          lineHeight: "20px",
          overflow: "hidden"
        }}
      >
        <div
          style={{
            maxHeight: 60,
            overflowY: "scroll",
            marginRight: -20,
          }}
        >
          {this.colorContent()}
        </div>
      </div>
    );
  }
}