const AdminStatics = () => {
  const UserDataBase = [
    { id: 1, year: 1401, userGain: 6400, userLost: 400 },
    { id: 2, year: 1401, userGain: 7100, userLost: 250 },
    { id: 3, year: 1402, userGain: 10000, userLost: 500 },
    { id: 3, year: 1399, userGain: 3500, userLost: 110 },
  ];
  const [userData] = useState({
    labels: UserDataBase.map((data) => data.year),
    datasets: [
      {
        label: "Users Gained",
        data: UserDataBase.map((data) => data.userGain),
        backgroundColor: [
          "rgba(255, 29, 255, 0.5)",
          "rgba(0, 255, 0, 0.5)",
          "rgba(0, 172, 62, 0.5)",
          "rgba(255, 0, 0, 0.5)",
          "rgba(255, 121, 189, 0.5)",
        ],
        hoverBackgroundColor: "rgba(119, 222, 227, 0.5)",
        opacity: "10%",
        borderColor: "green",
        borderWidth: 1,
      },
    ],
  });

  const [userBarData] = useState({
    labels: UserDataBase.map((data) => data.year),
    datasets: [
      {
        label: "تعداد",
        fillColor: "blue",
        data: [3, 7, 4],
      },
      {
        label: "تلفات",
        fillColor: "red",
        data: [4, 3, 5],
      },
      {
        label: "کشتار شده",
        fillColor: "green",
        data: [7, 2, 6],
      },
    ],
  });

  const myUserDataBase = [
    { id: 1, year: 15, userGain: 20, userLost: 10 },
    { id: 2, year: 10, userGain: 2, userLost: 10 },
    { id: 2, year: 30, userGain: 15, userLost: 10 },
    { id: 2, year: 20, userGain: 20, userLost: 13 },
  ];

  let mydata = myUserDataBase.map((data) => {
    return { x: data.userGain, y: data.userLost, r: data.year };
  });

  console.log(mydata);

  const [bubbleData] = useState({
    datasets: [
      {
        label: "Users Gained",
        data: mydata,
        backgroundColor: [
          "rgba(255, 29, 255, 0.8)",
          "rgba(0, 255, 0, 0.9)",
          "rgba(0, 172, 62, 0.6)",
          "rgba(255, 0, 0, 0.5)",
          "rgba(255, 121, 189, 0.2)",
        ],
        opacity: "10%",
        borderColor: "green",
        borderWidth: 1,
      },
    ],
  });

  return (
    <Box display={"flex"} justifyContent="center">
      <Grid
        container
        direction="column"
        justifyContent="center"
        xs={12}
        sm={12}
        md={10}
        lg={10}
      >
        <Grid
          display="flex"
          justifyContent="space-between"
          gap={SPACING.SMALL}
          mt={SPACING.SMALL}
          maxWidth="400px"
          maxHeight="300px"
        >
          <ChartBar chartData={userBarData} />
          <ChartLinear chartData={userBarData} />
          <ChartPie chartData={userData} />
        </Grid>
        <Grid
          display="flex"
          justifyContent="space-between"
          gap={SPACING.SMALL}
          mt={SPACING.SMALL}
          maxWidth="400px"
          maxHeight="300px"
        >
          <ChartDoughnut chartData={userData} />
          <ChartPolarArea chartData={userData} />
          <ChartRadar chartData={userData} />
        </Grid>{" "}
        <Grid
          display="flex"
          justifyContent="space-between"
          gap={SPACING.SMALL}
          mt={SPACING.SMALL}
          maxWidth="400px"
          maxHeight="300px"
        >
          <ChartScatter chartData={userData} />
          <ChartBubble chartData={bubbleData} />
        </Grid>
      </Grid>
    </Box>
  );
};

export default AdminStatics;