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

export const FavoriteSettings = () => {
  const { favoriteStation, setFavoriteStation } = useFavoriteStation();
  const { goBack } = useNavigation();
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <SheetHeaderItem
        title="お気に入り設定"
        LeftItem={{ title: "＜ 設定", onPress: goBack }}
      />
      <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>
      <Text
        style={{
          backgroundColor: "white",
          borderWidth: 1,
          borderStyle: "solid",
        }}
      >
        お気に入り登録した駅を並び替えることができます。一番上に置いた駅が位置情報の起動時に表示されます。(移動不可能な駅の場合エラーが発生します。任意指定が可能になる機能を開発予定です。)
      </Text>
    </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>
);