import React from "react";
import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
import { CheckBox } from "react-native-elements";
import { FavoriteSettingsItem } from "./FavoliteSettings/FavoiliteSettingsItem";

export const FavoriteSettings = ({ navigate }) => {
  const { favoriteStation, setFavoriteStation } = useFavoriteStation();
  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" }}>
        {favoriteStation.map((currentStation, index, array) => (
          <FavoriteSettingsItem
            currentStation={currentStation}
            setFavoriteStation={setFavoriteStation}
            index={index}
            array={array}
            key={currentStation[0].StationNumber}
          />
        ))}
      </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>
);