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

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: "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>
      <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>
);