import React, { useState } from "react";
import { Link, useParams } from "react-router-dom";
import { useGetCurrencyHistoryByIdQuery } from "../../../Services/exchange.rate.service";
import { Badge, Box, Button, HStack, Input, Text } from "@chakra-ui/react";
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import NormalTable from "../../../Components/DataTable/NormalTable";
import Pagination from "../../../Components/Pagination";
import { AddIcon } from "@chakra-ui/icons";

const ExchangeHistroy = () => {
  const params = useParams();
  const id = params?.id;
  const [searchTerm, setSearchTerm] = useState("");

  const { data, isLoading, errors } = useGetCurrencyHistoryByIdQuery(id, {
    skip: !id,
  });

  console.log(data?.data);

  // ==============================[Table Filter]========================

  const filteredData = data?.data?.filter((item) => {
    const name = item?.fromCurrency?.currencyName;
    const searchLower = searchTerm?.toLowerCase();
    const nameMatches = name?.toLowerCase().includes(searchLower);
    return nameMatches;
  });

  // ====================================================[Table Setup]================================================================

  const tableHeadRow = ["From date", "To date", "Currency"];

  const extractedArray = filteredData?.map((item) => ({
    "From date": (
      <Text
        justifyContent={"left"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        pt={1}
        pb={1}
        className="d-flex align-items-center web-text-small"
      >
        {item.effectiveFrom}
      </Text>
    ),

    "To date": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
          {item.effectiveTill}
        </Text>
      </Box>
    ),

    Currency: (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
          {item.rate}
        </Text>
      </Box>
    ),
  }));

  return isLoading ? (
    <FullscreenLoaders />
  ) : (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
      <Box bg="white.500">
        <HStack
          display={"flex"}
          justifyContent={"space-between"}
          ps={1}
          pe={1}
          pb={4}
          pt={4}
          spacing="24px"
        >
          {/* =======================[Search Input]======================== */}
          <Box fontSize={'md'}>
          History :-{" "}
            <Badge me={1} fontSize={"sm"} colorScheme="forestGreen">
              {data?.data?.[0]?.fromCurrency?.currencyCode}
            </Badge>{" "}
            to
            <Badge ms={2} fontSize={"sm"} colorScheme="forestGreen">
              {data?.data?.[0]?.toCurrency?.currencyCode} 
            </Badge>
          </Box>

          <Input
            type="search"
            width={300}
            placeholder="Search..."
            size="sm"
            rounded="sm"
            focusBorderColor="green.500"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </HStack>
      </Box>

      {/* =================== [Data Table] ===================== */}

      <NormalTable
        emptyMessage={`We don't have any Sponers `}
        tableHeadRow={tableHeadRow}
        data={extractedArray}
        isLoading={isLoading}
      />
    </Box>
  );
};

export default ExchangeHistroy;
