import React from "react";
import { CartesianChart } from "victory-native";
import {
  Image,
  Line,
  useFont,
  useImage,
} from "@shopify/react-native-skia";
import EmojiFont from "../../assets/fonts/Segoe_UI_Emoji.ttf";
import { wp } from "../utils/ResponsiveScreen";

export const Screen = () => {
  const data = [
    {
      x: "S",
      val: 1,
      date: 1716076800000,
    },
    {
      x: "M",
      val: 2,
      date: 1716163200000,
    },
    {
      x: "T",
      val: 6,
      date: 1716249600000,
    },
    {
      x: "W",
      val: 3,
      date: 1716336000000,
    },
    {
      x: "T",
      val: 7,
      date: 1716422400000,
    },
    {
      x: "F",
      val: 5,
      date: 1716508800000,
    },
    {
      x: "S",
      val: 4,
      date: 1716595200000,
    },
  ];

  const smileys = ["😠", "☹️", "🙁", "😐", "🙂", "😊", "😀"];
  const redDotImage = useImage(require("../../assets/images/redDot.png"));
  const greenDotImage = useImage(require("../../assets/images/blueDot.png"));
  const greyDotImage = useImage(require("../../assets/images/greyDot.png"));

  return (
    <CartesianChart
      data={data}
      xKey="x"
      yKeys={["val", "date"]}
      padding={wp(5)}
      domainPadding={{ left: wp(3), right: wp(3), top: wp(1) }}
      domain={{ y: [0, 7] }}
      axisOptions={{
        font: useFont(EmojiFont, 16),
        tickCount: 7,
        lineColor: {
          grid: { x: "#d4d4d8", y: "#A5A9A9" },
          frame: "#d4d4d8",
        },
        labelColor: "#121723",
        formatYLabel(label): string {
          let labelVal = "";
          if (label > 0 && label < 8) {
            labelVal = smileys[label - 1];
          }
          return labelVal;
        },
      }}
    >
      {({ points }) => {
        const pointsArray = points.val
          .filter((item: any) => item.yValue !== 0)
          .map((item: any) => ({
            x: item.x,
            xValue: String(item.xValue),
            y: item.y as number,
            yValue: item.yValue as number,
          }));
        return pointsArray.map((item: any, index: number) => {
          let lineColor = "#B74B4B";
          if (pointsArray[index + 1]?.yValue > 4) {
            lineColor = "#417777";
          } else if (pointsArray[index + 1]?.yValue === 4) {
            lineColor = "#A5A9A9";
          }
          return (
            <>
              {pointsArray.length > 1 && index < pointsArray.length - 1 && (
                <Line
                  p1={{ x: pointsArray[index].x, y: pointsArray[index].y }}
                  p2={{
                    x: pointsArray[index + 1].x,
                    y: pointsArray[index + 1].y,
                  }}
                  color={lineColor}
                  strokeWidth={3}
                />
              )}
              <Image
                key={String(item.x)}
                image={
                  item?.yValue === 4
                    ? greyDotImage
                    : item?.yValue > 4
                    ? greenDotImage
                    : redDotImage
                }
                fit="contain"
                x={item.x - wp(3)}
                y={item?.y - wp(2)}
                width={wp(6)}
                height={wp(6)}
              />
            </>
          );
        });
      }}
    </CartesianChart>
  );
};