import React, { FC, useState, useEffect } from "react";
import { Text, TextStyle, View, TouchableOpacity } from "react-native";
import { useInterval } from "../../../lib/useInterval";

const descriptionStyle: TextStyle = {
  fontSize: parseInt("16%"),
  fontWeight: "bold",
};

type Props = {
  areaInfo: string;
  numberOfLines?: number;
  onClick?: () => void;
  onLongClick?: () => void;
};
export const AreaDescription:FC<Props> = ({ areaInfo, numberOfLines = 0, onClick, onLongClick }) => {
  const [areaString, setAreaString] = useState("");
    const [areaStringLength, setAreaStringLength] = useState(0);
    const [move, setMove] = useState(0);
    useInterval(
      () => {
        if (areaInfo != "") {
          setMove(areaStringLength < move ? 0 : move + 1);
        }
      },
      350,
      true
    );
    useEffect(() => {
      if (!areaInfo) {
        setAreaString("");
        return () => {};
      }
      setAreaString(
        areaInfo.substring(move, areaInfo.length) + areaInfo.substring(0, move)
      );
    }, [move]);
  
    useEffect(() => {
      if (!areaInfo) {
        setAreaStringLength(0);
        return () => {};
      }
      setAreaStringLength(areaInfo.length);
    }, [areaInfo]);
  return(
  <TouchableOpacity
    style={{
      alignContent: "center",
      alignItems: "center",
      width: "94%",
      marginVertical: 5,
      marginHorizontal: "3%",
      backgroundColor: "#000",
      flexDirection: "row",
      overflow: "hidden",
    }}
    onPress={onClick}
    onLongPress={onLongClick}
  >
    <View style={{ flex: 4, flexDirection: "row" }}>
      {numberOfLines == 1 ? (
        <Text style={{ ...descriptionStyle, color: "red" }}>
          運行情報 &gt;{" "}
        </Text>
      ) : (
        <Text style={{ ...descriptionStyle, color: "green" }}> &gt; </Text>
      )}

      <Text
        style={{ ...descriptionStyle, color: "green" }}
        numberOfLines={numberOfLines}
      >
        {areaString.replaceAll("\n", "").replaceAll("\r", "")}
      </Text>
    </View>
  </TouchableOpacity>
  );
};