import { AS } from "@/storageControl";
import React from "react";
import {
  TouchableOpacity,
  Text,
  LayoutAnimation,
  KeyboardAvoidingView,
  Platform,
} from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
import { SearchUnitBox } from "@/components/Menu/RailScope/SearchUnitBox";

export const CarouselTypeChanger = ({
  locationStatus,
  position,
  stationListMode,
  setStationListMode,
  setSelectedCurrentStation,
  mapMode,
  setMapMode,
  isSearchMode,
  setisSearchMode,
  input,
  setInput,
}) => {
  const returnToDefaultMode = () => {
    LayoutAnimation.configureNext({
      duration: 300,
      create: {
        type: LayoutAnimation.Types.easeInEaseOut,
        property: LayoutAnimation.Properties.opacity,
      },
      update: {
        type: LayoutAnimation.Types.easeInEaseOut,
        property: LayoutAnimation.Properties.opacity,
      },
    });
    setMapMode(false);
  };
  return (
    <KeyboardAvoidingView
      behavior="position"
      contentContainerStyle={{ flex: 1, flexDirection: "row" }}
      keyboardVerticalOffset={mapMode ? 0 : 45}
      enabled={Platform.OS === "ios"}
      style={{
        width: "100%",
        height: 40,
        flexDirection: "row",
        position: mapMode ? "absolute" : "relative",
        bottom: mapMode ? 0 : undefined,
        zIndex: 1000,
        backgroundColor: "white",
      }}
      key={"carouselTypeChanger"}
    >
      <SearchUnitBox
        isSearchMode={isSearchMode}
        setisSearchMode={setisSearchMode}
        input={input}
        setInput={setInput}
      />
      <TouchableOpacity
        style={{
          flex: 1,
          backgroundColor:
            stationListMode == "position" ? "#0099CC" : "#0099CC80",
          padding: 5,
          alignItems: "center",
          flexDirection: "row",
          marginHorizontal: 5,
          borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
          borderBottomLeftRadius: mapMode ? 0 : 20,
          borderBottomRightRadius: mapMode ? 0 : 20,
        }}
        disabled={!locationStatus}
        onPressIn={() => {
          if (!position) return;
          returnToDefaultMode();
          setStationListMode("position");
          AS.setItem("stationListMode", "position");
          setSelectedCurrentStation(0);
        }}
        onPress={() => {
          if (!position) return;
          returnToDefaultMode();
          setStationListMode("position");
          AS.setItem("stationListMode", "position");
          setSelectedCurrentStation(0);
        }}
      >
        <Ionicons
          name="locate-outline"
          size={14}
          color="white"
          style={{ margin: 5 }}
        />
        <Text
          style={{
            color: "white",
            fontSize: 14,
            fontWeight: "bold",
            flex: 1,
            textAlign: "center",
          }}
        >
          現在地基準
        </Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={{
          padding: 5,
          alignItems: "center",
          flexDirection: "row",
          marginHorizontal: 5,
          borderRadius: 50,
        }}
        onPressIn={() => returnToDefaultMode()}
      >
        <Ionicons
          name={!mapMode ? "menu" : "chevron-up-outline"}
          size={30}
          color="#0099CC"
          style={{ marginHorizontal: 5 }}
        />
      </TouchableOpacity>
      <TouchableOpacity
        style={{
          flex: 1,
          backgroundColor:
            stationListMode == "favorite" ? "#0099CC" : "#0099CC80",
          padding: 5,
          alignItems: "center",
          flexDirection: "row",
          marginHorizontal: 5,
          borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
          borderBottomLeftRadius: mapMode ? 0 : 20,
          borderBottomRightRadius: mapMode ? 0 : 20,
        }}
        onPressIn={() => {
          returnToDefaultMode();
          // お気に入りリスト更新
          setStationListMode("favorite");
          AS.setItem("stationListMode", "favorite");
          setSelectedCurrentStation(0);
        }}
        onPress={() => {
          returnToDefaultMode();
          // お気に入りリスト更新
          setStationListMode("favorite");
          AS.setItem("stationListMode", "favorite");
          setSelectedCurrentStation(0);
        }}
      >
        <Ionicons name="star" size={14} color="white" style={{ margin: 5 }} />
        <Text
          style={{
            color: "white",
            fontSize: 14,
            fontWeight: "bold",
            flex: 1,
            textAlign: "center",
          }}
        >
          お気に入りリスト
        </Text>
      </TouchableOpacity>
    </KeyboardAvoidingView>
  );
};
