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

export function HelloWidget({ 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: "match_parent",
          flexDirection: "row",
          padding: 10,
        }}
      >
        <TextWidget
          text={"列車遅延速報EX"}
          style={{
            fontSize: 30,
            fontWeight: "bold",
            fontFamily: "Inter",
            color: "#fff",
          }}
        />
        <FlexWidget style={{ flex: 1 }} />
        <TextWidget
          text={time}
          style={{
            fontSize: 32,
            fontFamily: "Inter",
            color: "#fff",
          }}
        />
      </FlexWidget>
      <FlexWidget
        style={{ flex: 1, backgroundColor: "#fff", width: "match_parent" }}
      >
        {delayString ? (
          delayString.map((d) => {
            let data = d.split(" ");
            return (
              <FlexWidget
                style={{
                  flexDirection: "row",
                  width: "match_parent",
                  backgroundColor: "#ffffff",
                }}
                key={data[1]}
              >
                <TextWidget
                  style={{ flex: 15, fontSize: 20, color: "#000000" }}
                  text={data[0].replace("\n", "")}
                />
                <TextWidget
                  style={{ flex: 5, fontSize: 20, color: "#000000" }}
                  text={data[1]}
                />
                <TextWidget
                  style={{ flex: 6, fontSize: 20, color: "#000000" }}
                  text={data[3]}
                />
              </FlexWidget>
            );
          })
        ) : (
          <TextWidget
            style={{
              color: "#000000",
            }}
          >
            現在、5分以上の遅れはありません。
          </TextWidget>
        )}
      </FlexWidget>
    </FlexWidget>
  );
}