import * as React from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import Tooltip from 'components/items/Tooltip';
import styleIdentifiers from './detailLegend.scss';

const styles = classNames.bind(styleIdentifiers);

export interface DetailLegendProps {
  legend: Record<string, any>;
  data: Record<string, any>;
}

interface DetailLegendState {}

export default class DetailLegend extends React.Component<DetailLegendProps, DetailLegendState> {
  render(): JSX {
    const { legend, data } = this.props;

    if (!legend || !legend.infos) return false;

    const keys = legend.infos && Object.keys(legend.infos);

    if (!keys) return false;

    const userInfos = data && data.infos;
    let display = false;
    for (let i = 0; i < keys.length; i++) {
      if (userInfos && userInfos[keys[i]]) display = true;
    }

    return (
      <div className={styles('DetailLegend')}>
        {legend.titleDetail && (
          <div className={styles('title')}>
            <TextItem path={legend.titleDetail} />
          </div>
        )}
        {!display && <div>-</div>}
        {keys.map(
          (key, index): JSX => {
            const detail = legend.infos[`${key}Detail`];

            const status = (
              <div key={key || index} className={styles('item', key)}>
                <div className={styles('text')}>{legend.infos[key]}</div>
              </div>
            );

            if (data && data.infos && data.infos[key]) {
              return detail ? (
                <Tooltip direction="top" key={index} item={status} text={detail} />
              ) : (
                status
              );
            }
            return false;
          },
        )}
      </div>
    );
  }
}
