import React from "react";
import { FlexWidget, TextWidget } from "react-native-android-widget";
import dayjs from "dayjs";
import { WidgetColors, widgetLightColors } from "./widget-theme";

export function getStrangeTrainData() {
  return { nowText: dayjs().format("HH:mm") };
}

export function StrangeTrainWidget({ nowText, colors = widgetLightColors }: { nowText: string; colors?: WidgetColors }) {
  return (
    <FlexWidget
      style={{
        height: "match_parent",
        width: "match_parent",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: colors.background,
        borderRadius: 16,
      }}
      clickAction="OPEN_URI"
      clickActionData={{ uri: "jrshikoku://open/traininfo" }}
    >
      <FlexWidget
        style={{
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: colors.headerBg,
          width: "match_parent",
          flexDirection: "row",
          paddingTop: 10,
          paddingBottom: 10,
        }}
      >
        <TextWidget
          text="怪レい列車BOT"
          style={{
            fontSize: 30,
            fontWeight: "bold",
            fontFamily: "Inter",
            color: colors.headerText,
            textAlign: "left",
            marginLeft: 10,
          }}
        />
        <FlexWidget style={{ flex: 1 }} />
        <TextWidget
          text={nowText}
          style={{
            fontSize: 30,
            fontFamily: "Inter",
            color: colors.headerText,
            textAlign: "right",
            marginRight: 10,
          }}
        />
      </FlexWidget>

      <FlexWidget
        style={{
          flex: 1,
          backgroundColor: colors.background,
          width: "match_parent",
          padding: 10,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <TextWidget
          text="🚃"
          style={{
            fontSize: 36,
            textAlign: "center",
            marginBottom: 8,
          }}
        />
        <TextWidget
          style={{
            color: colors.text,
            fontSize: 20,
            textAlign: "center",
          }}
          text="通知で怪レい列車をお知らせします"
        />
      </FlexWidget>
    </FlexWidget>
  );
}