import useCallerHistory from "@/lib/hooks/useCallerHistory";
import { Box, Chip, Divider, Fade, List, Stack } from "@mui/material";
import { useState } from "react";
import HistoryHeader from "./HistoryHeader";
import LoadingHistory from "./LoadingHistory";
import ErrorOrEmpty from "./ErrorOrEmpty";
import ListItemOfCalls from "./ListItemOfCalls";
import { Headphones } from "@mui/icons-material";

const max_size = 10;
const CallHistory = ({ tab }) => {
  const {
    firstItemOfHistory,
    historyList,
    isLoadingHistoryList,
    errorHistoryList,
  } = useCallerHistory(tab.id, tab.phone_number, max_size);
  const [showRestOfHistory, setShowRestOfHistory] = useState(false);

  return (
    <Stack
      sx={{
        height: "100%",
      }}
    >
      <HistoryHeader tab={tab} />
      <Stack sx={{ height: "100%", overflowY: "auto" }}>
        {isLoadingHistoryList ? (
          <LoadingHistory />
        ) : errorHistoryList ? (
          <ErrorOrEmpty isErrorOrEmpty="error" />
        ) : !firstItemOfHistory ? (
          <ErrorOrEmpty isErrorOrEmpty="empty" />
        ) : (
          <Box>
            <ListItemOfCalls key={"first"} historyItem={firstItemOfHistory} />
            {historyList && (
              <Divider>
                <Chip
                  icon={<Headphones />}
                  onClick={() => setShowRestOfHistory(true)}
                  label={"نمایش موارد بیشتر"}
                  disabled={showRestOfHistory}
                />
              </Divider>
            )}
            {showRestOfHistory &&
              historyList.map((historyItem, index) => (
                <>
                  <ListItemOfCalls key={index} historyItem={historyItem} />
                  <Divider />
                </>
              ))}
          </Box>
        )}
      </Stack>
    </Stack>
  );
};

export default CallHistory;
