import { Story, Meta } from '@storybook/react';
import { useTheme, makeStyles } from '@mui/styles';
import type { Palette } from '@mui/material/styles/createPalette';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import map from 'lodash/map';

const size = '50px';

const createClasses = makeStyles(theme => ({
  title: {
    marginBottom: theme.spacing(3)
  },
  block: {
    height: size
  }
}));

const colorsMap: {
  [key in keyof Partial<Palette>]: number[];
} = {
  primary: [100, 200, 300, 400, 500, 600],
  secondary: [100, 200, 300, 400, 500, 600, 700],
  error: [200, 500, 600],
  success: [200, 500],
  warning: [500]
};

const PaletteTemplate = () => {
  const classes = createClasses();

  const { palette } = useTheme();

  return (
    <Grid container direction="column">
      <Typography className={classes.title} variant="h1">
        Hover the colors to see their value:
      </Typography>
      <Grid container>
        {map(colorsMap, (value: number[], key: keyof Palette) => {
          return (
            <Grid container item xs={2} direction="column" key={key}>
              {map(palette[key] as Record<string, string>, (val, k) => {
                if (!value.includes(Number(k))) {
                  return null;
                }
                const title = `${key} ${k}: ${val}`;
                return (
                  <Tooltip title={title} key={title}>
                    <Box
                      m={0.5}
                      className={classes.block}
                      style={{
                        backgroundColor: val
                      }}
                    />
                  </Tooltip>
                );
              })}
            </Grid>
          );
        })}
      </Grid>
      <Box display="flex" mt={1}>
        Charts (special colors):&nbsp;
        {map(palette.specialColors, value => {
          return (
            <Tooltip title={value} key={value}>
              <Box
                className={classes.block}
                mx={0.5}
                width={size}
                height={size}
                style={{
                  backgroundColor: value
                }}
              />
            </Tooltip>
          );
        })}
      </Box>
    </Grid>
  );
};

export default {
  title: 'Foundations',
  argTypes: {}
} as Meta;

const Template: Story = () => <PaletteTemplate />;

export const Colors = Template.bind({});