import React, { useEffect, useState } from "react";
import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import { SwitchArea } from "../atom/SwitchArea";
import { CheckBox } from "react-native-elements";
import { TripleSwitchArea } from "../atom/TripleSwitchArea";
import { getWidgetInfo, WidgetPreview } from "react-native-android-widget";
import { TraInfoEXWidget } from "../AndroidWidget/TraInfoEXWidget";
import {
  getDelayData,
  nameToWidget,
} from "../AndroidWidget/widget-task-handler";
import { ListItem } from "native-base";

export const WidgetSettings = ({ navigate }) => {
  const [widgetList, setWidgetList] = useState([]);
  useEffect(() => {
    const d = [];
    Object.keys(nameToWidget).forEach((element) => {
      const widgetInfo = getWidgetInfo(element);
      widgetInfo.then((s) => {
        if (s.length > 0) {
          s.forEach((elem) => {
            console.log(elem);
            d.push(elem);
          });
        }
      });
    });
    setWidgetList(d);
  }, []);

  const [time, setTime] = useState(time);
  const [delayString, setDelayString] = useState(delayString);
  useEffect(() => {
    getDelayData().then(({ time, delayString }) => {
      setTime(time);
      setDelayString(delayString);
    });
  }, []);
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
        <View style={{ flex: 1 }}>
          <TouchableOpacity
            onPress={() => navigate("settingTopPage")}
            style={{
              flexDirection: "column",
              flex: 1,
            }}
          >
            <View style={{ flex: 1 }} />
            <Text
              style={{
                fontSize: 20,
                fontWeight: "bold",
                textAlign: "left",
                textAlignVertical: "center",
                color: "white",
                padding: 10,
              }}
            >
              ＜ 設定
            </Text>
            <View style={{ flex: 1 }} />
          </TouchableOpacity>
        </View>

        <Text
          style={{
            fontSize: 20,
            fontWeight: "bold",
            textAlign: "center",
            color: "white",
            padding: 10,
          }}
        >
          ウィジェット設定
        </Text>
        <View style={{ flex: 1 }}></View>
      </View>
      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
        <View style={{ alignContent: "center", alignItems: "center" }}>
          <View
            style={{
              borderRadius: 15,
              borderColor: "black",
              borderWidth: 5,
              borderStyle: "solid",
              overflow: "hidden",
              margin: 10,
            }}
          >
            <WidgetPreview
              renderWidget={() => (
                <TraInfoEXWidget time={time} delayString={delayString} />
              )}
              width={400}
              height={250}
            />
          </View>
        </View>
        <ListItem key={"default"}>
          <Text
            style={{
              fontSize: 20,
              alignItems: "center",
              alignContent: "center",
              textAlign: "center",
              textAlignVertical: "center",
              marginRight: 10,
            }}
          >
            ID
          </Text>
          <Text
            style={{
              fontSize: 20,
              alignItems: "center",
              alignContent: "center",
              textAlign: "center",
              textAlignVertical: "center",
            }}
          >
            名前
          </Text>
        </ListItem>
        {widgetList.map((widget) => (
          <ListItem key={widget.widgetId}>
            <Text
              style={{
                fontSize: 20,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
                marginRight: 10,
              }}
            >
              {widget.widgetId}
            </Text>
            <Text
              style={{
                fontSize: 20,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              {widget.widgetName}
            </Text>
          </ListItem>
        ))}
      </ScrollView>
    </View>
  );
};

const SimpleSwitch = ({ bool, setBool, str }) => (
  <View style={{ flexDirection: "row" }}>
    <CheckBox
      checked={bool == "true" ? true : false}
      checkedColor="red"
      onPress={() => setBool(bool == "true" ? "false" : "true")}
      containerStyle={{
        flex: 1,
        backgroundColor: "#00000000",
        borderColor: "white",
        alignContent: "center",
      }}
      textStyle={{ fontSize: 20, fontWeight: "normal" }}
      title={str}
    />
  </View>
);