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

export const getInfoString = async () => {
  // Fetch data from the server
  const time = dayjs().format("HH:mm");
  const text = await fetch(
    "https://script.google.com/macros/s/AKfycbz80LcaEUrhnlEsLkJy0LG2IRO3DBVQhfNmN1d_0f_HvtsujNQpxM90SrV9yKWH_JG1Ww/exec"
  )
    .then((response) => response.text())
    .then((data) => {
      if (data !== "") {
        return data.split("^");
      }
      return null;
    });
  ToastAndroid.show(`${text}`, ToastAndroid.SHORT);
  return { time, text };
};

export function InfoWidget({ time, text }) {
  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={"列車運行情報"}
          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,
        }}
      >
        {text ? (
          <TextWidget
            style={{
              color: "#000000",

              fontSize: 20,
            }}
            clickAction="OPEN_APP"
            text={text}
          />
        ) : (
          <TextWidget
            style={{
              color: "#000000",
              fontSize: 20,
            }}
            clickAction="WIDGET_CLICK"
            text="通常運行中です。"
          />
        )}
      </ListWidget>
    </FlexWidget>
  );
}

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