import React, { useState, useEffect } from "react";
import {
  StatusBar,
  View,
  LayoutAnimation,
  ScrollView,
  Linking,
  Text,
  TouchableOpacity,
} from "react-native";
import AutoHeightImage from "react-native-auto-height-image";
import { FontAwesome, Foundation, Ionicons } from "@expo/vector-icons";
import ActionSheet from "react-native-actions-sheet";
import Sign from "../../components/駅名表/Sign";
import { useInterval } from "../../lib/useInterval";

import { TicketBox } from "../atom/TicketBox";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import lineColorList from "../../assets/originData/lineColorList";
import { getPDFViewURL } from "../../lib/getPdfViewURL";

export const StationDeteilView = (props) => {
  const {
    StationBoardAcSR,
    currentStation,
    originalStationList,
    favoriteStation,
    setFavoriteStation,
    busAndTrainData,
    navigate,
    onExit,
  } = props;
  const [trainBus, setTrainBus] = useState();
  useEffect(() => {
    if (!currentStation) return () => {};
    const data = busAndTrainData.filter((d) => {
      return d.name === currentStation[0].Station_JP;
    });
    if (data.length == 0) {
      setTrainBus();
    }
    setTrainBus(data[0]);
  }, [currentStation]);
  const info =
    currentStation &&
    (currentStation[0].StationTimeTable.match(".pdf")
      ? getPDFViewURL(currentStation[0].StationTimeTable)
      : currentStation[0].StationTimeTable);
  return (
    <ActionSheet
      ref={StationBoardAcSR}
      gestureEnabled
      CustomHeaderComponent={<></>}
    >
      <View
        key={currentStation}
        style={{
          backgroundColor: "white",
          borderRadius: 5,
          borderColor: "dark",
          borderWidth: 1,
        }}
      >
        <View style={{ height: 26, width: "100%" }}>
          <View
            style={{
              height: 6,
              width: 45,
              borderRadius: 100,
              backgroundColor: "#f0f0f0",
              marginVertical: 10,
              alignSelf: "center",
            }}
          />
        </View>
        <View>
          {currentStation && (
            <View
              style={{
                margin: 10,
                marginHorizontal: wp("10%"),
              }}
            >
              <Sign
                currentStation={currentStation}
                originalStationList={originalStationList}
                favoriteStation={favoriteStation}
                setFavoriteStation={setFavoriteStation}
                oP={() => {
                  navigate("howto", {
                    info,
                    onExit,
                  });
                  StationBoardAcSR.current?.hide();
                }}
                oLP={() => Linking.openURL(currentStation[0].StationTimeTable)}
              />
            </View>
          )}
          {currentStation &&
            currentStation.map((d) => (
              <NexPreStationLine
                currentStation={d}
                originalStationList={originalStationList}
                favoriteStation={favoriteStation}
                setFavoriteStation={setFavoriteStation}
              />
            ))}
          {currentStation &&
            currentStation[0].JrHpUrl &&
            currentStation[0].StationNumber != "M12" && (
              <駅構内図 //高松/阿波池田&後免&須崎kounai.png児島例外/
                oP={() => {
                  navigate("howto", {
                    info:
                      currentStation[0].JrHpUrl.replace("/index.html", "/") +
                      "/kounai_map.html",
                    onExit,
                  });
                  StationBoardAcSR.current?.hide();
                }}
                oLP={() => {
                  Linking.openURL(
                    currentStation[0].JrHpUrl.replace("/index.html", "/") +
                      "/kounai_map.html"
                  );
                }}
                uri={currentStation[0].JrHpUrl.replace("/index.html", "/")}
              />
            )}
          {currentStation && (
            <View style={{ flexDirection: "row" }}>
              {!currentStation[0].JrHpUrl || (
                <TicketBox
                  backgroundColor={"#AD7FA8"}
                  icon={<Foundation name="web" color="white" size={50} />}
                  flex={1}
                  onPressButton={() => {
                    navigate("howto", {
                      info: currentStation[0].JrHpUrl,
                      onExit,
                    });
                    StationBoardAcSR.current?.hide();
                  }}
                  onLongPressButton={() =>
                    Linking.openURL(currentStation[0].JrHpUrl)
                  }
                >
                  web
                </TicketBox>
              )}
              {!currentStation[0].StationTimeTable || (
                <TicketBox
                  backgroundColor={"#8F5902"}
                  icon={<FontAwesome name="table" color="white" size={50} />}
                  flex={1}
                  onPressButton={() => {
                    navigate("howto", {
                      info,
                      onExit,
                    });
                    StationBoardAcSR.current?.hide();
                  }}
                  onLongPressButton={() =>
                    Linking.openURL(currentStation[0].StationTimeTable)
                  }
                >
                  時刻表
                </TicketBox>
              )}
              {!currentStation[0].StationMap || (
                <TicketBox
                  backgroundColor={"#888A85"}
                  icon={<Ionicons name="map" color="white" size={50} />}
                  flex={1}
                  onPressButton={() =>
                    Linking.openURL(currentStation[0].StationMap)
                  }
                >
                  Map
                </TicketBox>
              )}
              {!trainBus || (
                <TicketBox
                  backgroundColor={"#CE5C00"}
                  icon={<Ionicons name="bus" color="white" size={50} />}
                  flex={1}
                  onPressButton={() => {
                    navigate("howto", {
                      info: trainBus.address,
                      onExit,
                    });
                    StationBoardAcSR.current?.hide();
                  }}
                  onLongPressButton={() => Linking.openURL(trainBus.address)}
                >
                  並行バス
                </TicketBox>
              )}
            </View>
          )}
        </View>
      </View>
    </ActionSheet>
  );
};

const StationName = (props) => {
  const { stringData, ss } = props;
  return (
    <View style={ss}>
      <Text style={styleSheet.下枠駅名}>{stringData.Station_JP}</Text>
      <Text style={styleSheet.下枠駅名}>{stringData.Station_EN}</Text>
    </View>
  );
};

const NexPreStationLine = ({
  currentStation,
  originalStationList,
  oP,
  favoriteStation,
  setFavoriteStation,
}) => {
  const [preStation, setPreStation] = useState();
  const [nexStation, setNexStation] = useState();
  const [lineName, setLineName] = useState();

  useEffect(() => {
    getPreNextStation(currentStation);
  }, [currentStation]);

  useEffect(() => {
    if (!currentStation) return () => {};
    getPreNextStation(currentStation);
  }, []);
  const getPreNextStation = (now) => {
    const lineList = [
      "予讃線(高松-松山間)[Y]",
      "予讃線(松山-宇和島間)[U]",
      "予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]",
      "土讃線(多度津-高知間)[D]",
      "土讃線(高知-窪川間)[K]",
      "高徳線(高松-徳島間)[T]",
      "徳島線(徳島-阿波池田)[B]",
      "鳴門線(池谷-鳴門間)[N]",
      "瀬戸大橋線(宇多津-児島間)[M]",
    ];
    let returnData;
    lineList.forEach((d) => {
      let cache = originalStationList[d].findIndex(
        (data) => data.StationNumber == now.StationNumber
      );
      if (cache != -1) {
        returnData = [
          originalStationList[d][cache - 1],
          originalStationList[d][cache + 1],
          d,
        ];
      }
    });
    setPreStation(returnData[0]);
    setNexStation(returnData[1]);
    setLineName(returnData[2]);
  };
  return (
    <View
      style={{
        height: 50,
        backgroundColor: lineName
          ? lineColorList[lineName.split("[")[1].replace("]", "")]
          : "red",
        flexDirection: "row",
        alignContent: "center",
        alignItems: "center",
      }}
    >
      <View style={styleSheet.下枠フレーム}>
        {preStation ? (
          <>
            <Text style={styleSheet.下枠左右マーク}>◀</Text>
            {preStation.StationNumber ? (
              <View style={styleSheet.下枠駅ナンバー}>
                <View style={{ flex: 1 }} />
                <Text
                  style={{
                    fontSize: parseInt("10%"),
                    color: "white",
                  }}
                >
                  {preStation.StationNumber}
                </Text>
                <View style={{ flex: 1 }} />
              </View>
            ) : (
              <></>
            )}
            <StationName
              stringData={preStation}
              ss={{ flex: 1, alignItems: "flex-start" }}
            />
          </>
        ) : (
          <></>
        )}
      </View>

      <Text
        style={{
          fontSize: parseInt("10%"),
          color: "white",
          textAlign: "center",
        }}
      >
        {lineName &&
          lineName
            .split("(")
            .map((d, index) => (index == 1 ? "(" + d : d))
            .join("\n")}
      </Text>
      <View style={styleSheet.下枠フレーム}>
        {nexStation ? (
          <>
            <StationName
              stringData={nexStation}
              ss={{ flex: 1, alignItems: "flex-end" }}
            />
            {nexStation.StationNumber ? (
              <View style={styleSheet.下枠駅ナンバー}>
                <View style={{ flex: 1 }} />
                <Text style={{ fontSize: parseInt("15%"), color: "white" }}>
                  {nexStation.StationNumber}
                </Text>
                <View style={{ flex: 1 }} />
              </View>
            ) : (
              <></>
            )}
            <Text style={styleSheet.下枠左右マーク}>▶</Text>
          </>
        ) : (
          <></>
        )}
      </View>
    </View>
  );
};

const 駅構内図 = (props) => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <TouchableOpacity
        style={{
          height: 50,
          backgroundColor: "#888A85",
          flexDirection: "column",
          alignContent: "center",
          alignItems: "center",
          margin: 2,
        }}
        onPress={props.oP}
        onLongPress={props.oLP}
        //onPress={() => setOpen(!open)}
      >
        <View style={{ flex: 1 }} />
        <Text
          style={{
            color: "white",
            textAlign: "center",
            textAlignVertical: "center",
            flex: 1,
          }}
        >
          {open ? "駅構内図を非表示" : "駅構内図を表示"}
        </Text>
        <View style={{ flex: 1 }} />
      </TouchableOpacity>
      <View>
        {open && (
          <>
            <AutoHeightImage
              source={{ uri: props.uri + "images/kounai.gif" }}
              resizeMode="contain"
              width={wp("100%")}
            />
            <AutoHeightImage
              source={{ uri: props.uri + "images/kounai.png" }}
              resizeMode="contain"
              width={wp("100%")}
            />
            <AutoHeightImage
              source={{ uri: props.uri + "images/kounai_1f.gif" }}
              resizeMode="contain"
              width={wp("100%")}
            />
            <AutoHeightImage
              source={{ uri: props.uri + "images/kounai_2f.png" }}
              resizeMode="contain"
              width={wp("100%")}
            />
          </>
        )}
      </View>
    </>
  );
};

const styleSheet = {
  外枠: {
    width: wp("80%"),
    height: (wp("80%") / 20) * 9,
    borderColor: "#2E94BB",
    borderWidth: 1,
    backgroundColor: "white",
  },
  下帯: {
    position: "absolute",
    bottom: "0%",
    left: "0%",
    width: "100%",
    height: "30%",
    backgroundColor: "#2E94BB",
  },
  JRStyle: {
    position: "absolute",
    top: "2%",
    left: "2%",
    fontWeight: "bold",
    fontSize: parseInt("30%"),
    color: "#2E94BB",
  },
  stationNameAreaOverWrap: {
    position: "absolute",
    top: "10%",
    alignContent: "center",
    flexDirection: "row",
  },
  Station_JP: {
    fontWeight: "bold",
    fontSize: parseInt("40%"),
    color: "#005170",
  },
  Station_EN: {
    fontWeight: "bold",
    fontSize: parseInt("15%"),
    color: "#005170",
  },
  下帯内容: {
    position: "absolute",
    bottom: "0%",
    height: "30%",
    width: "100%",
    alignItems: "center",
    flexDirection: "column",
  },
  下枠フレーム: {
    flex: 1,
    flexDirection: "row",
    alignContent: "center",
    height: wp("10%"),
  },
  下枠左右マーク: {
    fontWeight: "bold",
    fontSize: parseInt("20%"),
    color: "white",
    paddingHorizontal: 10,
    textAlignVertical: "center",
  },
  下枠駅ナンバー: {
    alignContent: "center",
    alignItems: "center",
    width: wp("8%"),
    height: wp("8%"),
    margin: wp("1%"),
    borderColor: "white",
    borderWidth: parseInt("2%"),
    borderRadius: parseInt("100%"),
  },
  下枠駅名: {
    fontWeight: "bold",
    fontSize: parseInt("15%"),
    color: "white",
    flex: 1,
    paddingHorizontal: 0,
    marginVertical: 0,
    textAlignVertical: "center",
  },
};