import React, { memo, ReactNode } from 'react';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { useTheme } from '@mui/material/styles';
import clsx from 'clsx';
import type { FormControlLabelProps } from '@mui/material/FormControlLabel';

import createClasses from './styles';

export interface ChartLegendProps {
  chartConfig?: {
    name: string;
    id: string;
    color?: string;
    show: boolean;
    invisible?: boolean;
  }[];
  handleChange?: (id: string) => FormControlLabelProps['onChange'];
  active?: boolean;
  vertical?: boolean;
  data?: { name: string; value: number; color?: string }[];
  legendUnitPrefix?: string;
  legendUnitPostfix?: string;
  classRoot?: string;
  formatter?: (value: number) => ReactNode;
}

const ChartLegend = (props: ChartLegendProps) => {
  const theme = useTheme();
  const classes = createClasses();
  const {
    chartConfig = [],
    active = false,
    handleChange,
    vertical = false,
    data = [],
    legendUnitPrefix,
    legendUnitPostfix,
    classRoot,
    formatter
  } = props;

  if (vertical) {
    if (chartConfig.length > 0) {
      return (
        <Grid container className={clsx(classes.rootV, classRoot)}>
          {chartConfig.map((item, index) => {
            if (!item.invisible) {
              if (active) {
                return (
                  <FormControlLabel
                    key={item.id}
                    onChange={handleChange?.(item.id)}
                    className={classes.itemA}
                    control={
                      <Checkbox
                        classes={{
                          root: classes.checkbox
                        }}
                        checked={item.show}
                        icon={
                          <Grid
                            className={classes.square}
                            style={{
                              border: `1px solid                                            
                                                        ${
                                                          item.color ||
                                                          theme.palette.specialColors[index + 1]
                                                        }`
                            }}
                          />
                        }
                        checkedIcon={
                          <Grid
                            className={classes.square}
                            style={{
                              backgroundColor: item.color || theme.palette.specialColors[index + 1]
                            }}
                          />
                        }
                      />
                    }
                    classes={{
                      label: classes.name
                    }}
                    label={item.name}
                  />
                );
              }
              return (
                <Grid key={item.id} className={classes.itemV}>
                  <Typography component="span">
                    <Grid
                      component="span"
                      className={clsx(classes.square, classes.squareRight)}
                      style={{
                        backgroundColor: item.color || theme.palette.specialColors[index + 1]
                      }}
                    />
                    <Typography component="span" className={classes.name}>
                      {item.name}
                    </Typography>
                  </Typography>
                </Grid>
              );
            }
            return null;
          })}
        </Grid>
      );
    }

    return (
      <Grid container className={clsx(classes.rootV, classRoot)}>
        {data.map((item, index) => (
          <Grid key={item.name} className={classes.itemV}>
            <Typography component="span">
              <Grid
                component="span"
                className={clsx(classes.square, classes.squareRight)}
                style={{
                  backgroundColor: item.color || theme.palette.specialColors[index + 1]
                }}
              />
              <Typography component="span" className={classes.name}>
                {item.name}
              </Typography>
            </Typography>
            <Typography component="span" className={clsx(classes.name, classes.value)}>
              {formatter
                ? formatter(item.value)
                : `${legendUnitPrefix}${item.value}${legendUnitPostfix}`}
            </Typography>
          </Grid>
        ))}
      </Grid>
    );
  }

  return (
    <Grid container className={classRoot}>
      {chartConfig.map((item, index) => {
        if (!item.invisible) {
          if (active) {
            return (
              <FormControlLabel
                key={item.id}
                onChange={handleChange?.(item.id)}
                className={classes.itemA}
                control={
                  <Checkbox
                    classes={{
                      root: classes.checkbox
                    }}
                    checked={item.show}
                    icon={
                      <Grid
                        className={classes.square}
                        style={{
                          border: `1px solid                                            
                                                ${
                                                  item.color ||
                                                  theme.palette.specialColors[index + 1]
                                                }`
                        }}
                      />
                    }
                    checkedIcon={
                      <Grid
                        className={classes.square}
                        style={{
                          backgroundColor: item.color || theme.palette.specialColors[index + 1]
                        }}
                      />
                    }
                  />
                }
                classes={{
                  label: classes.name
                }}
                label={item.name}
              />
            );
          }
          return (
            <Typography component="span" key={item.id} className={classes.item}>
              <Grid
                component="span"
                className={clsx(classes.square, classes.addMarginRight)}
                style={{
                  backgroundColor: item.color || theme.palette.specialColors[index + 1]
                }}
              />
              <Typography component="span" className={classes.name}>
                {item.name}
              </Typography>
            </Typography>
          );
        }
        return null;
      })}
    </Grid>
  );
};

ChartLegend.defaultProps = {
  chartConfig: [],
  active: false,
  vertical: false,
  legendUnitPrefix: '',
  legendUnitPostfix: ''
};

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