import React, { useEffect, useState } from "react";
import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import * as Clipboard from "expo-clipboard";

import { CheckBox } from "react-native-elements";
import { AS } from "../../storageControl";
import { useNotification } from "../../stateBox/useNotifications";
import { useNavigation } from "@react-navigation/native";
import { SheetHeaderItem } from "../atom/SheetHeaderItem";

export const NotificationSettings = () => {
  const { expoPushToken } = useNotification();
  const { goBack } = useNavigation();
  const [traInfoEX, setTraInfoEX] = useState(false);
  const [informations, setInformations] = useState(false);
  const [strangeTrain, setStrangeTrain] = useState(false);
  useEffect(() => {
    AS.getItem("traInfoEX").then(setTraInfoEX);
    AS.getItem("informations").then(setInformations);
    AS.getItem("strangeTrain").then(setStrangeTrain);
  }, []);

  const setRegister = () => {
    fetch(
      "https://n8n.haruk.in/webhook/jr-shikoku-notification-configurations",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          token: expoPushToken,
          traInfoEX,
          informations,
          strangeTrain,
        }),
      }
    ).then(() => {
      Promise.all([
        AS.setItem("traInfoEX", traInfoEX.toString()),
        AS.setItem("informations", informations.toString()),
        AS.setItem("strangeTrain", strangeTrain.toString()),
      ]).then(() => alert("通知の設定を保存、登録しました"));
    });
  };
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <SheetHeaderItem
        title="通知設定(β)"
        LeftItem={{ title: "＜ 設定", onPress: goBack }}
        RightItem={{ title: "登録実行", onPress: setRegister }}
      />
      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
        <SimpleSwitch
          bool={traInfoEX}
          setBool={setTraInfoEX}
          str="遅延速報EX"
        />
        <SimpleSwitch
          bool={informations}
          setBool={setInformations}
          str="運行情報"
        />
        <SimpleSwitch
          bool={strangeTrain}
          setBool={setStrangeTrain}
          str="怪レい列車"
        />
        <Text
          style={{ fontWeight: "bold", padding: 10 }}
          onPress={() => Clipboard.setStringAsync(expoPushToken)}
        >
          通知を受け取りたい項目を選択してください。チェックボックスを選び、右上の「登録実行」を押すと設定が反映され、通知が届くようになります。
        </Text>
      </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>
);