import { setUserTabs } from "@/hooks/ChatReducer";
import { Tab, Tabs, Typography } from "@mui/material";
import React from "react";
import { ChatLabeldata, ChatTabsCustomSlide } from "../../style";
import { useSelector } from "react-redux";

function a11yProps(index: number) {
  return {
    id: `simple-tab-${index}`,
    "aria-controls": `simple-tabpanel-${index}`,
  };
}

const ChatSubTabs = (props) => {
  const {
    dispatch,
    unreadMessageCount,
    archivedUnreadMessageCount,
    value,
    handleChange,
  } = props;
  const { chatRequest } = useSelector((state: any) => state?.chatData);

  return (
    <>
      <Tabs
        value={value}
        onChange={handleChange}
        style={{}}
        sx={ChatTabsCustomSlide}
        variant="scrollable"
        scrollButtons={false}
        aria-label="scrollable prevent tabs example"
      >
        <Tab
          disableRipple
          label="All"
          onClick={() => {
            dispatch(
              setUserTabs({
                showAllUsers: true,
                showArchiveUsers: false,
                showUnreadUsers: false,
                showBlockedUsers: false,
              })
            );
          }}
          {...a11yProps(0)}
        />
        <Tab
          disableRipple
          label={
            <ChatLabeldata>
              <Typography>Unread</Typography>
              {unreadMessageCount > 0 && (
                <span className="total-count">{unreadMessageCount}</span>
              )}
            </ChatLabeldata>
          }
          onClick={() => {
            dispatch(
              setUserTabs({
                showAllUsers: false,
                showArchiveUsers: false,
                showUnreadUsers: true,
                showBlockedUsers: false,
                showNewRequestUsers: false,
              })
            );
          }}
          {...a11yProps(1)}
        />

        <Tab
          disableRipple
          label={
            <ChatLabeldata>
              <Typography>Archive</Typography>
              {archivedUnreadMessageCount > 0 && (
                <span className="total-count">
                  {archivedUnreadMessageCount}
                </span>
              )}
            </ChatLabeldata>
          }
          onClick={() => {
            dispatch(
              setUserTabs({
                showAllUsers: false,
                showArchiveUsers: true,
                showUnreadUsers: false,
                showBlockedUsers: false,
                showNewRequestUsers: false,
              })
            );
          }}
          {...a11yProps(2)}
        />
        <Tab
          disableRipple
          label="Blocked"
          onClick={() => {
            dispatch(
              setUserTabs({
                showAllUsers: false,
                showArchiveUsers: false,
                showUnreadUsers: false,
                showBlockedUsers: true,
                showNewRequestUsers: false,
              })
            );
          }}
          {...a11yProps(3)}
        />
        <Tab
          disableRipple
          label={
            <ChatLabeldata>
              <Typography>Request</Typography>
              {chatRequest?.length > 0 && (
                <span className="total-count">{chatRequest?.length}</span>
              )}
            </ChatLabeldata>
          }
          onClick={() => {
            dispatch(
              setUserTabs({
                showAllUsers: false,
                showArchiveUsers: false,
                showUnreadUsers: false,
                showBlockedUsers: false,
                showNewRequestUsers: true,
              })
            );
          }}
          {...a11yProps(3)}
        />
      </Tabs>
    </>
  );
};

export default ChatSubTabs;