import React, { useEffect, useState } from "react";
import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { CheckBox } from "react-native-elements";
import { getWidgetInfo, WidgetPreview } from "react-native-android-widget";
import { getDelayData } from "../AndroidWidget/TraInfoEXWidget";
import { getInfoString } from "../AndroidWidget/InfoWidget";
import { AS } from "../../storageControl";
import { nameToWidget } from "../AndroidWidget/widget-task-handler";
import { ListItem } from "native-base";
import { SheetHeaderItem } from "../atom/SheetHeaderItem";
export const WidgetSettings = ({ navigate }) => {
  const { JR_shikoku_train_info, Info_Widget } = nameToWidget;
  const { goBack } = useNavigation();
  const [time, setTime] = useState();
  const [delayString, setDelayString] = useState();
  const [trainInfo, setTrainInfo] = useState();
  const [widgetList, setWidgetList] = useState([]);
  const reload = async () => {
    const d = [];
    const data = await getWidgetInfo("JR_shikoku_train_info");
    data.forEach((elem) => {
      d.push(elem.widgetId);
    });
    setWidgetList(d);
  };
  useEffect(() => {
    reload();
  }, []);
  useEffect(() => {
    getDelayData().then(({ time, delayString }) => {
      setTime(time);
      setDelayString(delayString);
    });
    getInfoString().then(({ time, text }) => {
      setTime(time);
      setTrainInfo(text.toString());
    });
  }, []);
  return (
    
      
      
        
          
             (
                
              )}
              width={400}
              height={250}
            />
          
          
             }
              width={400}
              height={250}
            />
          
        
        
          
            ID
          
          
            名前
          
        
        {widgetList.map((id) => (
          
        ))}
      
      
        ホーム画面に追加したウィジェットをリストアップします。現状は数を表示するだけですが、ここに各種設定を追加していく予定です。
      
    
  );
};
const SimpleSwitch = ({ bool, setBool, str }) => (
  
     setBool(bool == "true" ? "false" : "true")}
      containerStyle={{
        flex: 1,
        backgroundColor: "#00000000",
        borderColor: "white",
        alignContent: "center",
      }}
      textStyle={{ fontSize: 20, fontWeight: "normal" }}
      title={str}
    />
  
);
const WidgetList = ({ id }) => {
  const [widgetConfig, setWidgetConfig] = useState("");
  const reload = () => {
    AS.getItem(`widgetType/${id}`)
      .then((widgetType) => {
        setWidgetConfig(widgetType);
      })
      .catch((e) => {
        setWidgetConfig("JR_shikoku_train_info");
      });
  };
  useEffect(reload, [id]);
  return (
     {
        //widget.widgetNameで定義されてないもう一つのウィジェットを選択する
        if (widgetConfig === "Info_Widget") {
          AS.setItem(`widgetType/${id}`, "JR_shikoku_train_info");
        } else {
          AS.setItem(`widgetType/${id}`, "Info_Widget");
        }
        reload();
      }}
    >
      
        {id}
      
      
        {widgetConfig}
      
    
  );
};