import React, { useState, useEffect } from "react";
import Breadcrumb from "@/components/ui/pages/Breadcrumb";
import { Row, Col } from "react-bootstrap";
import ProtectedRoute from "@/ProtectedRoute";
import { useCollapsed } from "@/components/Context/CollapsedContext";
import {
  MapFilter,

  getPorts,
  getStates,
  CarriesCordinates,
  getCarries,
  UpdateCordinatesstate,
  UpdateCordinatesstatePorts,
  getcarrierbyid,
} from "@/services/public";
import Layout from "@/components/layouts/Layout";
import Map from "@/components/ui/mapDashboard/map";
import Searchbar from "@/components/ui/mapDashboard/searchbar";
import Head from "next/head";
import LandingDashboard from "@/components/ui/mapDashboard/landingDashboard";


interface Props {
  datacordinates: any;
  breadcrumbs: {
    title: string;
    path: string;
  }[];
  cordinates: any;
  Carriesdata: any;
}
interface Props {
  datacordinates: any;
  breadcrumbs: {
    title: string;
    path: string;
  }[];
  cordinates: any;
  Carriesdata: any;
}

function Index(props: Props) {

  const [hidden, setHidden] = useState(false);
  const [portList, setPortList] = useState([]);
 
  const [stateList, setStateList] = useState([]);
  const [collapsed, setCollapsed] = useState(true);
  const [tableListing, setTableListing] = useState([]);
  const [carriersList, setCarrierList] = useState([]);
  const [cordinateId, SetCordinateid] = useState();
  const [getiddata, Setgetiddata] = useState();
  const [getstateName, SetgetstateName] = useState();
  const [MapState, SetMapState] = useState();
  const [isComponentVisible, setIsComponentVisible] = useState(true);
  const [UpdateCoordinates, setUpdateCordinates] = useState();
  const [address, SetAddress] = useState();
  const { isCollapsed } = useCollapsed();
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedMarket, setSelectedMarket] = useState(null);
  const [selectedTerminal,setSelectedTerminal] = useState("")
  const [marketSectionVisible, setMarketSectionVisible] = useState(true); 

  // Fetch data and updates as before...

  const handleMarketClick = (market) => {
    setSelectedMarket(market);
    setSearchTerm("")
    SetAddress("")
    setMarketSectionVisible(false); 
  };
  const handleTerminalClick = (name) => {
    setSelectedTerminal(name);
  };

  

  const handleBackToMarket = () => {
    setMarketSectionVisible(true);
  };
  useEffect(() => {
    const isSearchboxVisible = localStorage.getItem("isSearchboxVisible");
    if (isSearchboxVisible) {
      setIsComponentVisible(isSearchboxVisible === "false");
    }
  }, []);
  const fetchUpdates = async () => {
    if (cordinateId && cordinateId !== "yes") {
      const codId = await UpdateCordinatesstate(cordinateId);
      setUpdateCordinates(codId);
    }
  };

  const fetchDatas = async () => {
    
    const [res, response, tableData, coordinates] = await Promise.all([
      getPorts(),
      getStates(),
      getCarries(),
      CarriesCordinates(),
      getcarrierbyid(null, getiddata),
    ]);
    setCarrierList(coordinates);
    setTableListing(tableData);
    setPortList(res);
    setStateList(response);
  };

  useEffect(() => {
    fetchDatas();
  }, []);

  useEffect(() => {
    if (cordinateId === "yes") {
      const fetchData = async () => {
        const coordinatess = await Promise.all([CarriesCordinates()]);
        setUpdateCordinates(coordinatess);
      };
      fetchData();
    }
    fetchUpdates();
  }, [cordinateId]);

  useEffect(() => {
    if (getiddata === "yes") {
      fetchUpdates();
    }
  }, [getiddata]);

  const getNewAddress = (i) => {
    SetAddress(i);
  };

  useEffect(() => {
    const fetchData = async () => {
      if (getiddata !== "yes" && getiddata) {
        const id = await UpdateCordinatesstatePorts(cordinateId, getiddata);
        setUpdateCordinates(id);
      
      }
    };
    fetchData();
  }, [getiddata]);
  const [marketData, setMarketData] = useState([])
  const FilterMap = async () => {
    try {
      // Ensure MapState is defined and non-empty
      if (!MapState) {
        console.error("MapState is not defined or empty.");
        return;
      }

      // Convert MapState to uppercase and wrap it in an array
      let statesArray = [MapState.toUpperCase()];

      // Await the result of the MapFilter function
      let res = await MapFilter(statesArray);

      if (res?.data) {
        setMarketData(res.data);
      }
    } catch (error) {
      console.error("Error while filtering the map:", error);
    }
  };



  const filteredMarkets = marketData && marketData.length > 0
    ? marketData.filter((market) =>
      market.name.toLowerCase().includes(searchTerm.toLowerCase())
    )
    : [];


  useEffect(() => {
    FilterMap()
  }, [MapState])
  
  
  return (
    <Layout>
      <Head>
        <title>Carriers - Draydex</title>
      </Head>
      <div className={` ${isCollapsed ? 'collapsed-body' : 'content-body'}`}>
        <Row className="page-titles mx-0">
          <Col className="p-md-0">
            <Breadcrumb breadcrumbs={props?.breadcrumbs} />
          </Col>
        </Row>
        <Row>
          <Col style={{position:"relative"}}>
            <div className="container container-div">
              <div className="row">
                <div className="col-sm-6 table-headers">
                  <h3 className="text-primary h3_text mt-2">
                    Find & Manage Carriers
                  </h3>
                </div>
                <div className="col-sm-6">
                  {!hidden ? (
                    ""
                  ) : (
                    <div className="d-flex justify-content-end">
                      <Searchbar
                        style={"duble_btnos"}
                        cordinateId={SetCordinateid as any}
                        ids={Setgetiddata as any}
                        getStatess={stateList as any}
                        portLists={portList as void}
                        clearMap={SetMapState}
                        clearAddress={SetAddress}
                        setSelectedTerminal={setSelectedTerminal}
                      />
                    </div>
                  )}
                </div>
              </div>
            </div>
            <div>
              <div>
                <input
                  type="search"
                  style={{ marginTop: "-43px" }}
                  className={`form-control form-input w-50 search-field ${isComponentVisible ? "d-none" : ""}`}
                  placeholder="Search"
                />
              </div>
              <div>
                <LandingDashboard
                  MapState={MapState}
                  clearState={SetgetstateName}
                  stateName={getstateName}
                  address={address}
                  clearAddress={SetAddress}
                  clearMap={SetMapState}
                  updatecarriers={undefined} 
                  dataByid={getiddata?.data}
                  carries={undefined}
                  carrier={tableListing as any}
                  dataQuotes={undefined}
                  breadcrumbs={[]}
                  hide={setHidden as any}
                  state={hidden}
                  filter={address === undefined ? true : false}
                  keys="1"
                  filter="0"
                  selectedMarketss={selectedMarket}
                  selectedTerminal={selectedTerminal}
                  setSelectedTerminal={setSelectedTerminal}
                  setSelectedMarket={setSelectedMarket}
                  setMarketData={setMarketData}
                  setMarketSectionVisible={setMarketSectionVisible}
                />
                <div className={!collapsed ? "side_fixed_map" : "side_fixed_map1"}>
                  <div className={!collapsed ? "map_fixed_content1" : "map_fixed_content"}>
                    <button className="carrier_fixed_btn_" onClick={() => setCollapsed(!collapsed)}>
                      VIEW MAP, MARKETS & PORTS/TERMINAL
                    </button>
                    <div className="filter_block">
                      <div className="map_sec">
                        {/* Map Component */}
                        <Map
                          MapState={SetMapState}
                          getNewAdd={getNewAddress}
                          coordinates={UpdateCoordinates?.data}
                          keys={false}
                          cluster={true}
                          carriersList={carriersList}
                          setSelectedMarket={setSelectedMarket}
                          mapStats={5}
                          setMarketSectionVisible={setMarketSectionVisible}
                          setSelectedTerminal={setSelectedTerminal}
                        />
                          {marketSectionVisible && (
                            <>
                            {MapState ? (
                              <>
                                <div className="text-shown">
                                  <div className="search-tab">
                                    <button className="market_button">Markets</button>
                                    <input
                                      className="market_search"
                                      type="text"
                                      placeholder="Search Markets"
                                      value={searchTerm}
                                      onChange={(e) => setSearchTerm(e.target.value)}
                                    />
                                  </div>
                                
                                  <div className="market-list-container">
                                    {filteredMarkets.map((market, index) => (
                                      <div
                                        key={index}
                                        className="market_list"
                                        onClick={() => handleMarketClick(market)}
                                      >
                                        <p className="market_name">{market.name}</p>
                                      </div>
                                    ))}
                                  </div>
                                  </div>
                                </>
                              ) : null}
                            </>
                          )}

                          {/* Terminal Section */}
                          {!marketSectionVisible && selectedMarket && (
                            <>

                              {/* Market/Port/Terminal Title */}
                              <div className="market_button position-relative">
                              <p>{selectedMarket.name} Market / Ports & Terminals</p>
                              <button className="bg-danger mb-3 back" onClick={handleBackToMarket}>
                                Back to Markets
                              </button>
                              </div>

                              {/* Terminal Table */}
                              <table className="table table-striped mt-0 tab_table">
                                <thead>
                                  <tr>
                                    <th>Terminal</th>
                                    <th>Type</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  {selectedMarket.terminals.length > 0 ? (
                                    selectedMarket.terminals.map((terminal, index) => (
                                      <tr key={index} className="terminal_row">
                                        <td onClick={() => handleTerminalClick(terminal.name)}>{terminal.name ? <span style={{color:"blue"}}>{terminal.name}</span>: "NO DATA FOUND"}</td>
                                        <td>{terminal.type}</td>
                                      </tr>
                                    ))
                                  ) : (
                                    <tr>
                                      <td colSpan={2} className="no_data">No Terminals Found</td>
                                    </tr>
                                  )}
                                </tbody>

                              </table>
                            </>
                          )}
                        </div>                      
                      <div className="">
                        <Searchbar
                          cordinateId={SetCordinateid as any}
                          ids={Setgetiddata as any}
                          getStatess={stateList as any}
                          portLists={portList as void}
                          getState={SetgetstateName}
                          SetAddress={SetAddress}
                          clearMap={SetMapState}
                          clearAddress={SetAddress}
                          setSelectedMarket={setSelectedMarket}
                          setMarketSectionVisible={setMarketSectionVisible}
                          mapStats={5}
                          setSelectedTerminal={setSelectedTerminal}
                        />
                      </div>
                  
                    </div>
                    
                  </div>
                
                </div>
              </div>
              
            </div>
          </Col>
        </Row>
      </div>
    </Layout>
  );
}

export async function getServerSideProps(context: any) {
  return {
    props: {
      breadcrumbs: [
        {
          title: "Dashboard",
          path: "/dashboard",
        },
        {
          title: "Carriers",
          path: "/carriers",
        },
      ],
    },
  };
}

export default ProtectedRoute(Index);