import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from "recharts";
import styled, { css, useTheme } from "styled-components";

const StyledRegionAgeGenderChart = styled.div`
  ${({ theme }) => css`
    font-size: 0.5em;

    h3 {
      color: ${theme.dark};
      font-size: 2em;
      margin: 0 0 0.5em 0;
      line-height: 1.1;
      text-align: center;
    }

    .chart-wrap {
      /* width: 45em; */
      height: 24em;
    }
    .recharts-cartesian-axis-tick-value tspan {
      font-size: 1.4em;
    }
    .recharts-label {
      font-size: 1.4em;
    }

    .recharts-surface {
      transform: translateX(-30px);
      @media (min-width: 430px) {
        transform: translateX(-20px);
      }
      @media (min-width: 520px) {
        transform: translateX(0px);
      }
      @media (min-width: ${theme.sm}) {
        transform: translateX(-30px);
      }
    }

    .foot {
      display: none;
      background-color: white;
      padding: 0.6em 0.8em;
      font-size: 1.6em;
      color: ${theme.dark};
      strong {
        display: block;
        color: ${theme.green};
      }
    }

    .legend {
      display: flex;
      justify-content: center;
      margin: 5px 0 0 0px;
      font-size: 12px;
      color: black;
    }
    .legend-item {
      margin: 0 6px;
      :before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 4px;
        margin-right: 5px;
        vertical-align: middle;
      }
    }
    .male:before {
      background: ${theme.teal};
    }
    .female:before {
      background: ${theme.green};
    }
  `}
`;

const RegionAgeGenderChart = ({ data }: { data: any }) => {
  const theme = useTheme();
  return (
    <StyledRegionAgeGenderChart>
      <h3>Age Groups by DHB</h3>
      <div className="chart-wrap">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart
            data={data}
            layout="vertical"
            margin={{
              top: 10,
              right: 0,
              left: 0,
              bottom: 10,
            }}
            // @ts-ignore
            isAnimationActive={false}
          >
            <XAxis type="number" hide />
            <YAxis type="category" dataKey="age" interval={0} width={90} />
            <Bar dataKey="male" fill={theme.teal} stackId="a" />
            <Bar dataKey="female" fill={theme.green} stackId="a" />
          </BarChart>
        </ResponsiveContainer>
      </div>
      <div className="legend">
        <div className="legend-item male">Male</div>
        <div className="legend-item female">Female</div>
      </div>
    </StyledRegionAgeGenderChart>
  );
};

export default RegionAgeGenderChart;