import { Box, Card, Typography, useTheme } from "@mui/material";
import GrainDescriber from "grain/GrainDescriber";
import { Contract } from "models/Contract";
import { Label, Pie, PieChart, ResponsiveContainer, Text } from "recharts";

interface Props {
  contract: Contract;
}

export default function ContractVisualizer(props: Props) {
  const { contract } = props;
  const theme = useTheme();

  return (
    <Card style={{ height: "100%", padding: 10 }}>
      <Box height={"15%"}>
        <Typography style={{ fontWeight: 650, fontSize: 20 }}>
          {GrainDescriber(contract.grain()).name}
        </Typography>
        <Typography style={{ fontWeight: 650, fontSize: 15 }}>
          {contract.deliveredInPreferredUnit().toFixed(2)}/
          {contract.sizeInPreferredUnit().toFixed(2)} {contract.unit}
        </Typography>
      </Box>
      <ResponsiveContainer height={"85%"}>
        <PieChart>
          {/* <Legend
            verticalAlign="bottom"
            content={() => (
              <Box textAlign="center" marginY={0.5}>
                <Chip label={contract.commodityLabel()} />
              </Box>
            )}
          /> */}
          <Pie
            outerRadius={"100%"}
            innerRadius="70%"
            stroke="transparent"
            data={[
              {
                name: "",
                value: contract.settings.delivered,
                fill: contract.colour
              },
              {
                name: "",
                value: contract.settings.size - contract.settings.delivered
              }
            ]}
            dataKey="value"
            cx="50%"
            cy="50%">
            <Label
              position="center"
              fill={theme.palette.text.secondary}
              fontSize={"2rem"}
              fontWeight={650}
              content={props => {
                const { cx, cy } = props.viewBox as any;
                return (
                  <g>
                    <Text
                      x={cx}
                      y={cy}
                      dy={-15}
                      textAnchor="middle"
                      verticalAnchor="middle"
                      fill={props.fill}
                      fontWeight={props.fontWeight}
                      fontSize={props.fontSize}>
                      {((contract.settings.delivered / contract.settings.size) * 100).toFixed(1) +
                        "%"}
                    </Text>
                  </g>
                );
              }}
            />
            <Label
              position="center"
              fill={theme.palette.text.secondary}
              fontSize={"1.5rem"}
              fontWeight={650}
              content={props => {
                const { cx, cy } = props.viewBox as any;
                return (
                  <g>
                    <Text
                      x={cx}
                      y={cy}
                      dy={15}
                      textAnchor="middle"
                      verticalAnchor="middle"
                      fill={props.fill}
                      fontWeight={props.fontWeight}
                      fontSize={props.fontSize}>
                      Delivered
                    </Text>
                  </g>
                );
              }}
            />
          </Pie>
        </PieChart>
      </ResponsiveContainer>
    </Card>
  );
}
