import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'clsx';
import { InfoOutlined } from '@mui/icons-material';

import { DIMENSIONS, METRICS_VALUES } from '../../../../constants';

import { combinations } from '../../../../helpers';

import { Tooltip, Typography } from '@/mui/components';

import styles from './Preview.module.scss';

function Preview(props) {
  const dimensions = props.checkedDimensions?.length
    ? combinations(
        ...props.checkedDimensions.map((item) => [
          `${DIMENSIONS[item]?.previewTitle || DIMENSIONS[item]?.label} 1`,
          `${DIMENSIONS[item]?.previewTitle || DIMENSIONS[item]?.label} 2`,
        ]),
      )
    : [];

  return (
    <div className={styles.Wrap}>
      <div className={styles.Table}>
        <div className={styles.Row}>
          {!!props.checkedDimensions?.length && (
            <div key="dimensions" className={styles.Cell}>
              <div className={classNames(styles.Item, styles.Item___autoWidth)}>
                <div className={classNames(styles.TitleContainer, styles.TitleContainer___empty)}>
                  <Typography className={styles.Title} variant="subtitle2" color="text.primary" fontWeight={500}>
                    Dimensions
                  </Typography>
                </div>
                <div className={styles.Dimensions}>
                  {dimensions?.map((row, index) => (
                    <div key={`${+index}-row`} className={styles.DimensionsRow}>
                      {row.map((cell) => (
                        <div key={`${+index}-${cell}`} className={styles.DimensionsCell}>
                          <Typography variant="subtitle2" color="text.primary" fontWeight={500}>
                            {cell}
                          </Typography>
                        </div>
                      ))}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}
          {props.checkedMetrics.map((item, index) => (
            <div key={`${+index}-${item}`} className={styles.Cell}>
              <div className={styles.Item}>
                <div className={styles.TitleContainer}>
                  <Typography className={styles.Title} variant="subtitle2" color="text.primary" fontWeight={500}>
                    {METRICS_VALUES[item].label}
                  </Typography>
                </div>
                <div className={styles.Info}>
                  <Tooltip title={METRICS_VALUES[item].tooltip} placement="top">
                    <InfoOutlined fontSize="small" htmlColor="info.main" />
                  </Tooltip>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Preview.propTypes = {
  checkedMetrics: PropTypes.arrayOf(PropTypes.string).isRequired,
  checkedDimensions: PropTypes.arrayOf(PropTypes.string).isRequired,
};

export default Preview;
