import React from "react";
import {
  FlexWidget,
  TextWidget,
  ListWidget,
} from "react-native-android-widget";
import dayjs from "dayjs";
import { ToastAndroid } from "react-native";

export const getDelayData = async () => {
  // Fetch data from the server
  const time = dayjs().format("HH:mm");
  const delayString = await fetch(
    "https://script.google.com/macros/s/AKfycbyKxch7z7l8e07LXulRHqxjVoIiB13kcgvoToLE-rqlxLmLSKdlmqz0FI1F2EuA7Zfg/exec"
  )
    .then((response) => response.text())
    .then((data) => {
      if (data !== "") {
        return data.split("^");
      }
      return null;
    });
  ToastAndroid.show(`${delayString}`, ToastAndroid.SHORT);
  return { time, delayString };
};
export function TraInfoEXWidget({ time, delayString }) {
  return (
    <FlexWidget
      style={{
        height: "match_parent",
        width: "match_parent",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#ffffff",
        borderRadius: 16,
      }}
      clickAction="WIDGET_CLICK"
    >
      <FlexWidget
        style={{
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: "#0099CC",
          width: "100%",
          flexDirection: "row",
          paddingTop: 10,
          paddingBottom: 10,
        }}
      >
        <TextWidget
          text={"列車遅延速報EX"}
          style={{
            fontSize: 30,
            fontWeight: "bold",
            fontFamily: "Inter",
            color: "#fff",
            textAlign: "left",
            marginLeft: 10,
          }}
        />
        <FlexWidget style={{ flex: 1 }} />
        <TextWidget
          text={time}
          style={{
            fontSize: 30,
            fontFamily: "Inter",
            color: "#fff",
            textAlign: "right",
            marginRight: 10,
          }}
        />
      </FlexWidget>
      <ListWidget
        style={{
          flex: 1,
          backgroundColor: "#fff",
          width: "match_parent",
          height: "match_parent",
          padding: 10,
        }}
      >
        {delayString ? (
          delayString.map((d) => {
            let data = d.split(" ");
            return (
              <FlexWidget
                style={{
                  flexDirection: "row",
                  width: "match_parent",
                  backgroundColor: "#ffffff",
                  flex: 1,
                }}
                clickAction="WIDGET_CLICK"
                key={data[1]}
              >
                <FlexText flex={3} text={data[0].replace("\n", "")} />
                <FlexText flex={1} text={data[1]} />
                <FlexText flex={1} text={data[3]} />
              </FlexWidget>
            );
          })
        ) : (
          <TextWidget
            style={{
              color: "#000000",
              fontSize: 20,
            }}
            clickAction="WIDGET_CLICK"
            text="現在、5分以上の遅れはありません。"
          />
        )}
      </ListWidget>
    </FlexWidget>
  );
}

const FlexText = ({ flex, text }) => (
  <FlexWidget style={{ flex }}>
    <TextWidget style={{ fontSize: 20, color: "#000000" }} text={text} />
  </FlexWidget>
);