import { memo } from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Tooltip, { TooltipProps } from '@mui/material/Tooltip';
import makeStyles from '@mui/styles/makeStyles';
import clsx from 'clsx';
import { ProgressBar } from '../progressbar';
import type { ProgressBarProps } from '../progressbar';
import type { Theme } from '../@styles/theme-provider';

export interface HorizontalStackedBarsProps {
  /**
   * Array of data to display.
   */
  data: {
    /**
     * The width of the bar
     */
    width: string;
    /**
     * Props that will be passed to the current progress bar.
     */
    progressBarProps: ProgressBarProps;
    /**
     * If passed, a tooltip will appear on hover the current bar.
     */
    tooltipProps?: Omit<TooltipProps, 'title' | 'children'> & {
      title?: TooltipProps['title'];
    };
  }[];
}

const createClasses = makeStyles<Theme>(theme => ({
  root: {
    listStyle: 'none'
  },
  firstBar: {
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0,
    marginRight: theme.spacing(1 / 8)
  },
  middleBar: {
    borderRadius: 0,
    marginRight: theme.spacing(1 / 8)
  },
  lastBar: {
    borderTopLeftRadius: 0,
    borderBottomLeftRadius: 0
  }
}));

const barOrder = (length: number, index: number) => {
  if (length <= 1) return '';
  if (index === 0) return 'firstBar';
  if (index === length - 1) return 'lastBar';

  return 'middleBar';
};

const HorizontalStackedBars = (props: HorizontalStackedBarsProps) => {
  const { data } = props;
  const styles = createClasses();

  return (
    <Grid container component="ul" className={styles.root}>
      {data.map((singleData, index) => {
        const { width, progressBarProps, tooltipProps } = singleData;
        const barPosition = barOrder(data.length, index);

        const classes = {
          ...progressBarProps.classes,
          progress: clsx(progressBarProps?.classes?.progress, barPosition && styles[barPosition])
        };
        return (
          <Box width={width} key={`progress_${index}`} component="li">
            {tooltipProps?.title ? (
              <Tooltip title={tooltipProps.title} {...tooltipProps}>
                <Box>
                  <ProgressBar {...progressBarProps} classes={classes} value={100} />
                </Box>
              </Tooltip>
            ) : (
              <ProgressBar {...progressBarProps} classes={classes} value={100} />
            )}
          </Box>
        );
      })}
    </Grid>
  );
};

const m = memo(HorizontalStackedBars);
export { m as HorizontalStackedBars };