import { useTheme } from '@mui/material/styles';
import {
  Cell,
  Bar,
  BarChart,
  CartesianGrid,
  ResponsiveContainer,
  XAxis,
  YAxis,
  LabelList
} from 'recharts';
import { useTick, fixChartsClasses } from '../../utils';
import type { Theme } from '../@styles/theme-provider';
import type { ChartBarProps } from './types';

export function ChartBar(props: ChartBarProps) {
  const {
    ResponsiveContainerProps,
    BarChartProps,
    CartesianGridProps,
    XAxisProps,
    YAxisProps,
    BarProps,
    LabelListProps
  } = props;
  const data = BarChartProps?.data;
  const theme = useTheme<Theme>();
  const tick = useTick();
  const classes = fixChartsClasses();
  return (
    <ResponsiveContainer width="100%" className={classes.root} {...ResponsiveContainerProps}>
      <BarChart layout="vertical" {...BarChartProps}>
        <CartesianGrid
          vertical={false}
          stroke={theme.palette.primary[300]}
          strokeDasharray="2 2"
          {...CartesianGridProps}
        />
        <XAxis type="number" axisLine={false} tickLine={false} tick={tick} {...XAxisProps} />
        <YAxis
          dataKey="name"
          type="category"
          scale="band"
          axisLine={false}
          tickLine={false}
          {...YAxisProps}
        />
        <Bar dataKey="value" barSize={16} radius={[0, 4, 4, 0]} {...BarProps}>
          {data?.map(entry => (
            <Cell key={`cell-${entry.name}`} fill={entry?.color} />
          ))}
          <LabelList dataKey="value" position="insideRight" {...LabelListProps} />
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
}