import React, { useEffect, useState } from "react";
import { observer } from "mobx-react-lite";
import "../../styles/RouteWidget.css";
import { useGeolocationStore } from "../../stores";
import ContentAPI from "../../api/content/content.api";
import { apiStore } from "../../api/ApiStore/store";

const RouteWidget = observer(() => {
  const store = useGeolocationStore();
  const { contextData, isLoading, error, selectedLanguage } = store;
  const { routeStations, routeStationsEn, routeStationsZh, context, route } = apiStore;
  const [startStation, setStartStation] = useState(null);
  const [startStationEn, setStartStationEn] = useState(null);
  const [endStation, setEndStation] = useState(null);
  const [endStationEn, setEndStationEn] = useState(null);
  const [startStationZh, setStartStationZh] = useState(null);
  const [endStationZh, setEndStationZh] = useState(null);

  useEffect(() => {
    async function fetchStartStation() {
      try {
        const data = routeStations.find(
          (station) => station.id == context?.startStopId,
        );

        const dataEn = routeStationsEn.find(
          (station) => station.id == context?.startStopId,
        );
        const dataZh = routeStationsZh.find(
          (station) => station.id == context?.startStopId,
        );
        setStartStation(data);
        setStartStationEn(dataEn);
        setStartStationZh(dataZh);
      } catch (err) {
        console.error("Ошибка при загрузке начальной станции", err);
      }
    }

    fetchStartStation();
  }, [context?.startStopId, isLoading, selectedLanguage]);

  useEffect(() => {
    async function fetchEndStation() {
      try {
        const data = routeStations.find(
          (station) => station.id == context?.endStopId,
        );
        const dataEn = routeStationsEn.find(
          (station) => station.id == context?.endStopId,
        );
        const dataZh = routeStationsZh.find(
          (station) => station.id == context?.endStopId,
        );
        setEndStation(data);
        setEndStationEn(dataEn);
        setEndStationZh(dataZh);
      } catch (err) {
        console.error("Ошибка при загрузке конечной станции", err);
      }
    }

    fetchEndStation();
  }, [context?.endStopId, isLoading, selectedLanguage]);

  const shouldAnimate = (text, maxLength) => text?.length > maxLength;
  const getNumberSizeClass = (text) => {
    const length = text?.length || 0;
    if (length <= 2) return "";
    if (length === 3) return "route-widget-number--3";
    if (length === 4) return "route-widget-number--4";
    return "route-widget-number--5";
  };
  const getLabelSizeClass = (text) => {
    const length = text?.length || 0;

    if (length <= 40) return "";
    if (length <= 60) return "route-widget-label--medium";
    if (length <= 80) return "route-widget-label--small";

    return "route-widget-label--xsmall";
  };
  const routeEnSubtitle = `${startStationEn?.name} - ${endStationEn?.name}`;
  const routeZhSubtitle = `${startStationZh?.name} - ${endStationZh?.name}`;
  return (
    <div className="route-widget">
      <div className={`route-widget-number ${getNumberSizeClass(route?.route_sys_number || context?.routeNumber)}`}>
        {route?.route_sys_number || context?.routeNumber || ""}
      </div>
      <div className="route-widget-content">
        <div
          className={`route-widget-label ${
            shouldAnimate(startStation?.name, 18) ? "marquee" : ""
          } ${getLabelSizeClass(startStation?.name)}`}
>
          {startStation?.name}
        </div>
        <div
          className={`route-widget-label ${
            shouldAnimate(endStation?.name, 18) ? "marquee" : ""
          } ${getLabelSizeClass(endStation?.name)}`}
>
          {endStation?.name}
        </div>
        {(selectedLanguage === "en" || selectedLanguage === "ru") && (
          <div
            className={`route-widget-subtitle ${
              shouldAnimate(routeEnSubtitle, 50) ? "marquee" : ""
            }`}
>
            {routeEnSubtitle}
          </div>
        )}
        {selectedLanguage === "zh" && (
          <div
            className={`route-widget-subtitle ${
              shouldAnimate(routeZhSubtitle, 50) ? "marquee" : ""
            }`}
>
            {routeZhSubtitle}
          </div>
        )}
      </div>
    </div>
  );
});

export default RouteWidget;
