import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ReferenceLine,
  YAxisTickContentProps,
  Text,
} from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';

// #region Sample data
const data = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: 'Page B',
    uv: -3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: 'Page C',
    uv: -2000,
    pv: -9800,
    amt: 2290,
  },
  {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: 'Page E',
    uv: -1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: 'Page F',
    uv: 2390,
    pv: -3800,
    amt: 2500,
  },
  {
    name: 'Page G',
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];

const CustomYAxisTick = (props: YAxisTickContentProps) => {
  const {
    payload: { value },
  } = props;

  let fill: string;
  switch (Math.sign(value)) {
    case -1:
      fill = 'red';
      break;
    case 1:
      fill = 'green';
      break;
    default:
      fill = 'black';
  }

  return (
    <Text {...props} fill={fill} fontWeight={value === 0 ? 'bold' : 'normal'}>
      {value}
    </Text>
  );
};

// #endregion
const PositiveAndNegativeBarChart = () => {
  return (
    <BarChart
      style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
      responsive
      data={data}
      margin={{
        top: 5,
        right: 0,
        left: 0,
        bottom: 5,
      }}
    >
      <CartesianGrid />
      <XAxis dataKey="name" />
      <YAxis width="auto" tick={CustomYAxisTick} />
      <Tooltip />
      <Legend />
      <ReferenceLine y={0} />
      <Bar dataKey="pv" />
      <Bar dataKey="uv" />
      <RechartsDevtools />
    </BarChart>
  );
};

export default PositiveAndNegativeBarChart;