import Sign from "@/components/駅名表/Sign";
import React, { useEffect, useRef, useState } from "react";
import { AS } from "@/storageControl";
import { useWindowDimensions, View, LayoutAnimation } from "react-native";
import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
import { SheetManager } from "react-native-actions-sheet";
import { StationNumber } from "../StationPagination";
import { SimpleDot } from "../SimpleDot";
export const CarouselBox = ({
  originalStationList,
  listUpStation,
  nearPositionStation,
  setListIndex,
  listIndex,
  navigate,
}) => {
  const carouselRef = useRef<ICarouselInstance>(null);
  const { height, width } = useWindowDimensions();
  const [dotButton, setDotButton] = useState(false);
  const oPSign = () => {
    const payload = {
      currentStation: listUpStation[listIndex],
      navigate,
      goTo: "menu",
      //@ts-ignore
      useShow: () => SheetManager.show("StationDetailView", { payload }),
      onExit: () => SheetManager.hide("StationDetailView"),
    };
    //@ts-ignore
    SheetManager.show("StationDetailView", { payload });
  };
  const oLPSign = () => {
    LayoutAnimation.configureNext({
      duration: 600,
      update: { type: "spring", springDamping: 0.5 },
    });
    AS.setItem(
      "CarouselSettings/activeDotSettings",
      !dotButton ? "true" : "false"
    );
    setDotButton(!dotButton);
  };

  useEffect(() => {
    AS.getItem("CarouselSettings/activeDotSettings").then((data) => {
      setDotButton(data === "true");
    });
  }, []);
  useEffect(() => {
    if (!carouselRef.current) return;
    carouselRef?.current.scrollTo({
      count: listIndex - carouselRef.current.getCurrentIndex(),
      animated: true,
    });
  }, [listIndex]);
  const RenderItem = ({ item, index }) => {
    return (
      <View
        style={{
          backgroundColor: "#0000",
          width,
          flexDirection: "row",
          marginLeft: 0,
          marginRight: 0,
        }}
        key={item[0].StationNumber}
      >
        <View style={{ flex: 1 }} />
        <Sign
          stationID={item[0].StationNumber}
          isCurrentStation={item == nearPositionStation}
          oP={oPSign}
          oLP={oLPSign}
        />
        <View style={{ flex: 1 }} />
      </View>
    );
  };
  return (
    <View style={{ flex: 1, paddingTop: 10 }}>
      <Carousel
        ref={carouselRef}
        data={listUpStation}
        height={(((width / 100) * 80) / 20) * 9 + 10}
        pagingEnabled={true}
        snapEnabled={true}
        loop={false}
        width={width}
        style={{ width: width, alignContent: "center" }}
        mode="parallax"
        modeConfig={{
          parallaxScrollingScale: 1,
          parallaxScrollingOffset: 100,
          parallaxAdjacentItemScale: 0.8,
        }}
        onSnapToItem={setListIndex}
        renderItem={RenderItem}
      />
      <View
        style={{
          flexDirection: "row",
          justifyContent: "center",
          alignContent: "center",
          alignItems: "center",
        }}
      >
        {originalStationList &&
          listUpStation.map((d, index) => {
            const active = index == listIndex;
            const numberKey = d[0].StationNumber + index;
            return dotButton ? (
              <StationNumber
                onPress={() => setListIndex(index)}
                currentStation={d}
                active={active}
                key={numberKey}
              />
            ) : (
              <SimpleDot
                onPress={() => setListIndex(index)}
                active={active}
                key={numberKey}
              />
            );
          })}
      </View>
    </View>
  );
};