import React from "react";
import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { SwitchArea } from "../atom/SwitchArea";
import { CheckBox } from "react-native-elements";
import { TripleSwitchArea } from "../atom/TripleSwitchArea";
import { SheetHeaderItem } from "../atom/SheetHeaderItem";

export const LayoutSettings = ({
  navigate,
  iconSetting,
  setIconSetting,
  mapSwitch,
  setMapSwitch,
  stationMenu,
  setStationMenu,
  usePDFView,
  setUsePDFView,
  trainMenu,
  setTrainMenu,
  uiSetting,
  setUiSetting,
  trainPosition,
  setTrainPosition,
  headerSize,
  setHeaderSize,
}) => {
  const { goBack } = useNavigation();
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <SheetHeaderItem title="レイアウト設定" LeftItem={{ title: "＜ 設定", onPress: goBack }} />
      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
        <View style={{ flex: 1 }}>
          <SwitchArea
            str="列車アイコン表示"
            bool={iconSetting}
            setBool={setIconSetting}
            falseImage={require("../../assets/configuration/icon_default.jpg")}
            trueImage={require("../../assets/configuration/icon_original.jpg")}
            falseText={"本家\n(文字アイコン)"}
            trueText={"オリジナル\n(車種アイコン)"}
          />
          <SwitchArea
            str="列車表示"
            bool={uiSetting}
            setBool={setUiSetting}
            falseImage={require("../../assets/configuration/layout_default.jpg")}
            trueImage={require("../../assets/configuration/layout_tokyo.jpg")}
            falseText={"本家"}
            trueText={"オリジナル"}
            falseValue="default"
            trueValue="tokyo"
          />
          <SwitchArea
            str="トップメニュー表示"
            bool={mapSwitch}
            setBool={setMapSwitch}
            falseImage={require("../../assets/configuration/menu_default.jpg")}
            trueImage={require("../../assets/configuration/menu_original.jpg")}
            falseText={"本家\n(文字＆路線リスト)"}
            trueText={"オリジナル\n(マップ＆お気に入り)"}
          />
          <SwitchArea
            str="駅メニュー表示"
            bool={stationMenu}
            setBool={setStationMenu}
            falseText={"本家\n(文字)"}
            trueText={"オリジナル\n(駅名標)"}
            falseImage={require("../../assets/configuration/station_default.jpg")}
            trueImage={require("../../assets/configuration/station_original.jpg")}
          >
            <SimpleSwitch
              bool={usePDFView}
              setBool={setUsePDFView}
              color="red"
              str="時刻表PDFをアプリの外で表示する"
            />
          </SwitchArea>
          <SwitchArea
            str="列車メニュー"
            bool={trainMenu}
            setBool={setTrainMenu}
            falseText={"本家"}
            trueText={"オリジナル"}
            falseImage={require("../../assets/configuration/train_default.jpg")}
            trueImage={require("../../assets/configuration/train_original.jpg")}
          >
            <TripleSwitchArea
              str={"ヘッダーサイズ"}
              bool={headerSize}
              setBool={setHeaderSize}
              firstItem={{
                firstImage: require("../../assets/configuration/train_original_small.jpg"),
                firstText: "小固定",
                firstValue: "small",
              }}
              secondItem={{
                secondImage: require("../../assets/configuration/train_original.jpg"),
                secondText: "既定(可変)",
                secondValue: "default",
              }}
              thirdItem={{
                thirdImage: require("../../assets/configuration/train_original.jpg"),
                thirdText: "大固定",
                thirdValue: "big",
              }}
            />
            <SimpleSwitch
              bool={trainPosition}
              setBool={setTrainPosition}
              color="red"
              str="列車の現在地表示/ジャンプ"
            />
          </SwitchArea>
        </View>
      </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>
);