import React, { useEffect, useState } from "react";
import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import { SwitchArea } from "../atom/SwitchArea";
import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
import { CheckBox } from "react-native-elements";
import { ListItem } from "native-base";
import Icon from "react-native-vector-icons/Entypo";

export const FavoriteSettings = ({ navigate }) => {
  const { favoriteStation } = 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" }}>
        <Text>作成中</Text>
        {favoriteStation.map((currentStation) => {
          return (
            <ListItem>
              <Text style={{ fontSize: 20, flex: 2 }}>
                {currentStation
                  .map((d) => d.StationNumber)
                  .filter((d) => d !== null)
                  .join("/")}
              </Text>
              <Text style={{ fontSize: 20, flex: 3 }}>
                {currentStation[0].Station_JP}
              </Text>
              <View
                style={{
                  flex: 2,
                  flexDirection: "row",
                  alignContent: "center",
                  alignItems: "center",
                }}
              >
                <View style={{ flex: 1 }} />
                <Text style={{ fontSize: 20 }}>移動する</Text>
                <Icon name="chevron-right" size={20} />
              </View>
            </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>
);