import { FC, useRef, useState, useCallback, useEffect } from "react";
import {
  View,
  Text,
  ScrollView,
  useWindowDimensions,
  Vibration,
} from "react-native";
import { ExGridViewItem } from "./ExGridViewItem";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  runOnJS,
  useAnimatedScrollHandler,
  withTiming,
  Easing,
  FadeIn,
  FadeOut,
  BounceInUp,
  FadeInUp,
  FadeOutUp,
} from "react-native-reanimated";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { ExGridViewTimePositionItem } from "./ExGridViewTimePositionItem";
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
import dayjs from "dayjs";
type hoge = {
  trainNumber: string;
  array: string;
  name: string;
  timeType: string;
  time: string;
}[];
export const ExGridView: FC<{
  data: hoge;
}> = ({ data }) => {
  const groupedData: {
    [d: number]: {
      trainNumber: string;
      array: string;
      name: string;
      timeType: string;
      time: string;
      isOperating: boolean;
    }[];
  } = {
    "4": [],
    "5": [],
    "6": [],
    "7": [],
    "8": [],
    "9": [],
    "10": [],
    "11": [],
    "12": [],
    "13": [],
    "14": [],
    "15": [],
    "16": [],
    "17": [],
    "18": [],
    "19": [],
    "20": [],
    "21": [],
    "22": [],
    "23": [],
    "0": [],
    "1": [],
    "2": [],
    "3": [],
  };
  const groupKeys = [
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "11",
    "12",
    "13",
    "14",
    "15",
    "16",
    "17",
    "18",
    "19",
    "20",
    "21",
    "22",
    "23",
    "0",
    "1",
    "2",
    "3",
  ];

  const { width } = useWindowDimensions();
  const { currentTrain } = useCurrentTrain();
  data.forEach((item) => {
    let isOperating = false;
    let [hour, minute] = dayjs()
      .hour(parseInt(item.time.split(":")[0]))
      .minute(parseInt(item.time.split(":")[1]))
      .format("H:m")
      .split(":");
    if (currentTrain.findIndex((x) => x.num == item.trainNumber) != -1) {
      const currentTrainTime = currentTrain.find(
        (x) => x.num == item.trainNumber
      )?.delay;
      if (currentTrainTime != "入線") {
        [hour, minute] = dayjs()
          .hour(parseInt(hour))
          .minute(parseInt(minute))
          .add(parseInt(currentTrainTime), "minute")
          .format("H:m")
          .split(":");
      }
      isOperating = true;
    }
    groupedData[hour].push({ ...item, time: `${hour}:${minute}`, isOperating });
  });
  // ドラッグ位置を保持する共有値
  const widthX = useSharedValue(width);
  const savedWidthX = useSharedValue(width);
  const isChanging = useSharedValue(false);
  const [scrollEnabled, setScrollEnabled] = useState(true);
  const scrollRef = useRef<Animated.ScrollView>(null);
  const scrollRef2 = useRef<Animated.ScrollView>(null);

  // ScrollViewの有効/無効を切り替える関数
  const toggleScrollEnabled = useCallback((enabled: boolean) => {
    setScrollEnabled(enabled);
  }, []);

  // パンジェスチャー（ドラッグ）のハンドラー
  const pinchGesture = Gesture.Pinch()
    .onUpdate((e) => {
      const calc = savedWidthX.value * e.scale;
      widthX.value = calc > width ? calc : width;
      //runOnJS(scrollToRightEnd)();
    })
    .onEnd(() => {
      savedWidthX.value = widthX.value;
    });

  const gesture = Gesture.Pan()
    .minPointers(2) // 最低2本指
    .maxPointers(2) // 最大2本指
    .onStart(() => {
      runOnJS(toggleScrollEnabled)(false);
    })
    .onEnd(() => {
      runOnJS(toggleScrollEnabled)(true);
      savedWidthX.value = widthX.value;
    });
  const longPressGesture = Gesture.Pan()
    .minPointers(1)
    .maxPointers(1)
    .activateAfterLongPress(200)
    .onStart(() => {
      runOnJS(Vibration.vibrate)(30);
      isChanging.value = true;
    })
    .onUpdate((e) => {
      const calc = widthX.value + e.velocityY;
      widthX.value = calc > width ? calc : width;
    })
    .onEnd(() => {
      console.log("Long press ended");
      isChanging.value = false;
    });

  // ジェスチャーを組み合わせる
  const composed = Gesture.Simultaneous(
    longPressGesture,
    pinchGesture,
    gesture
  );

  // アニメーションスタイル
  const animatedStyle = useAnimatedStyle(() => ({
    width: widthX.value,
    backgroundColor: isChanging.value ? "#8adeffff" : "white",
  }));
  // 時ヘッダーを横にスクロールしたときの処理
  const scrollX = useSharedValue(0);
  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollX.value = event.contentOffset.x;
    },
  });
  const stickyTextStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: scrollX.value }],
  }));
  const animatedLongPressStyle = useAnimatedStyle(() => ({
    display: isChanging.value ? "flex" : "none",
  }));
  useEffect(() => {
    const getCurrentTime = dayjs().hour();
    setTimeout(() => {
      const keyTime =
        getCurrentTime - 4 <= 0 ? getCurrentTime + 24 : getCurrentTime;
      const goTo = keyTime * 60;
      if (goTo > 400) {
        scrollRef2.current?.scrollTo({ y: goTo - 300, animated: true });
      }
    }, 400);
  }, [scrollRef2]);
  return (
    <>
      <Animated.View
        style={[
          {
            position: "absolute",
            width,
            backgroundColor: "#26d1baff",
            zIndex: 500,
            top: 0,
          },
          animatedLongPressStyle,
        ]}
        entering={FadeInUp}
        exiting={FadeOutUp}
      >
        <Text style={{ fontSize: 30, textAlign: "center", flex: 1 }}>
          ↑縮小　・　拡大↓
        </Text>
      </Animated.View>
      <GestureDetector gesture={composed}>
        <Animated.ScrollView
          horizontal
          nestedScrollEnabled
          pinchGestureEnabled={false}
          scrollEnabled={scrollEnabled}
          onScroll={scrollHandler}
          onContentSizeChange={(contentWidth) => {
            // 現在のスクロール位置を取得
            const currentScrollX = scrollX.value;
            const containerWidth = width - 50;

            // コンテンツが画面からはみ出している場合のみ右端にスクロール
            if (currentScrollX + containerWidth > contentWidth) {
              const newScrollX = Math.max(0, contentWidth - containerWidth);
              scrollRef.current?.scrollTo({ x: newScrollX, animated: true });
            }
          }}
          ref={scrollRef}
          contentContainerStyle={{
            flexDirection: "column",
            backgroundColor: "white",
          }}
        >
          <Animated.View
            style={[
              {
                width: width,
                flexDirection: "row",
              },
              animatedStyle,
            ]}
          >
            {Array.from({ length: 60 }, (_, i) => i + 1).map((num) => {
              if (num % 5 === 0) {
                return (
                  <Text
                    key={num}
                    style={{
                      flex: 1,
                      textAlign: "left",
                      borderRightWidth: 0.5,
                      borderColor: "#ccc",
                      flexWrap: "nowrap",
                      fontSize: 12,
                    }}
                  >
                    {num - 5}
                  </Text>
                );
              } else return <></>;
            })}
            <Text
              style={{
                textAlign: "right",
                borderRightWidth: 0.5,
                borderColor: "#ccc",
                flexWrap: "nowrap",
                fontSize: 12,
                width: 50,
              }}
            >
              (分)
            </Text>
          </Animated.View>
          <Animated.ScrollView
            style={[{ width: width }, animatedStyle]}
            pinchGestureEnabled={false}
            minimumZoomScale={0.5}
            maximumZoomScale={3.0}
            scrollEnabled={scrollEnabled}
            stickyHeaderIndices={
              groupKeys.at(0) ? groupKeys.map((_, i) => i * 2) : []
            }
            ref={scrollRef2}
          >
            {groupKeys.map((hour) => [
              <View
                style={{
                  padding: 5,
                  borderBottomWidth: 0.5,
                  borderTopWidth: 0.5,
                  borderBottomColor: "#ccc",
                  backgroundColor: "#f0f0f0",
                }}
                key={hour}
              >
                <Animated.Text
                  style={[
                    {
                      fontSize: 15,
                      zIndex: 1,
                      marginLeft: 0,
                    },
                    stickyTextStyle,
                  ]}
                >
                  {hour}時台
                </Animated.Text>
              </View>,
              <View
                style={{
                  flexDirection: "row",
                  position: "relative",
                  height: 50,
                }}
              >
                {groupedData[hour].map((d, i, array) => (
                  <ExGridViewItem
                    key={d.trainNumber + i}
                    d={d}
                    index={i}
                    width={widthX}
                    array={array}
                  />
                ))}
                <ExGridViewTimePositionItem width={widthX} hour={hour} />
              </View>,
            ])}
          </Animated.ScrollView>
        </Animated.ScrollView>
      </GestureDetector>
    </>
  );
};