import React, { ComponentProps, FC, useEffect, useState } from "react";
import { View, Image, TouchableOpacity } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import dayjs from "dayjs";
import { useInterval } from "../../../lib/useInterval";
import { Icon } from "@expo/vector-icons/build/createIconSet";
import { SheetManager } from "react-native-actions-sheet";
import { customTrainDataDetector } from "../../custom-train-data";

type GlyphNames = ComponentProps<typeof Ionicons>["name"];

type Props = {
  data: { trainNum: string; limited: string };
  navigate: any;
  from: string;
};
type apt = {
  name: GlyphNames;
  color: string;
};
export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
  const [trainIcon, setTrainIcon] = useState(null);
  const [anpanmanStatus, setAnpanmanStatus] = useState<apt>();
  const [address, setAddress] = useState("");
  useEffect(() => {
    if (!data.trainNum) return;
    const { trainIcon, infoUrl } = customTrainDataDetector(data.trainNum);
    if (trainIcon) setTrainIcon(trainIcon);

    if (infoUrl) setAddress(infoUrl);

    switch (data.trainNum) {
      case "32D":
      case "36D":
      case "44D":
      case "48D":
      case "56D":
      case "33D":
      case "37D":
      case "45D":
      case "49D":
      case "57D":
        fetch(
          `https://n8n.haruk.in/webhook/dosan-anpanman?trainNum=${
            data.trainNum
          }&month=${dayjs().format("M")}&day=${dayjs().format("D")}`
        )
          .then((d) => d.json())
          .then((d) => {
            console.log(d);
            if (d.trainStatus == "〇") {
              //setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
            } else if (d.trainStatus == "▲") {
              setAnpanmanStatus({ name: "warning-outline", color: "yellow" });
            } else if (d.trainStatus == "×") {
              setAnpanmanStatus({ name: "close-circle-outline", color: "red" });
            }
          });
        break;
        case "2074D":
        case "2076D":
        case "2080D":
        case "2082D":
        case "2071D":
        case "2073D":
        case "2079D":
        case "2081D":
          fetch(
            `https://n8n.haruk.in/webhook/dosan-anpanman-first?trainNum=${
              data.trainNum
            }&month=${dayjs().format("M")}&day=${dayjs().format("D")}`
          )
            .then((d) => d.json())
            .then((d) => {
              console.log(d);
              if (d.trainStatus == "〇") {
                //setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
              } else if (d.trainStatus == "▲") {
                setAnpanmanStatus({ name: "warning-outline", color: "yellow" });
              } else if (d.trainStatus == "×") {
                //setAnpanmanStatus({ name: "close-circle-outline", color: "red" });
              }
            });
          break;
    }
  }, [data.trainNum]);
  const [move, setMove] = useState(true);
  useInterval(
    () => {
      // anpanmanStatusがデータを持っているなら実行
      if (anpanmanStatus) setMove(!move);
    },
    1000,
    true
  );
  return (
    <>
      {trainIcon && (
        <TouchableOpacity
          onPress={() => {
            navigate("howto", {
              info: address,
              goTo: from == "LED" ? "menu" : from,
            });
            SheetManager.hide("EachTrainInfo");
          }}
        >
          {move ? (
            <Image
              source={{ uri: trainIcon }}
              style={{ height: 34, width: 30, marginRight: 5 }}
              resizeMethod="scale"
            />
          ) : (
            <Ionicons
              {...anpanmanStatus}
              size={30}
              style={{ marginRight: 5 }}
            />
          )}
        </TouchableOpacity>
      )}
    </>
  );
};