import React from 'react';
import styled from 'styled-components';
import { useOrderDetails, useTabType } from '../store';
import OrderTemplate from './OrderTemplate';
import FlagTemplate from './FlagTemplate';
import ReminderTemplate from './ReminderTemplate';

function Tabs({
  activeTasks,
  closedTasks,
  activeReminders,
  closedReminders,
  dismissReminder,
  dismissFlags,
  routeInfoData,
}: any) {
  const [activeTab] = useTabType();
  const [orderDetails] = useOrderDetails();
  const initialNotifications = activeTasks?.slice(0, 3);
  const additionalNotifications = activeTasks?.slice(3);
  const initialReminders = activeReminders?.slice(0, 3);
  const additionalReminders = activeReminders?.slice(3);

  return (
    <>
      <Content>
        <Container className="tab-content">
          {activeTab === 'active' && (
            <>
              <OrderTemplate
                orderDetails={orderDetails}
                routeInfoData={routeInfoData}
              />
              {initialReminders?.map((item: any, index: any) => (
                <ReminderTemplate
                  key={index}
                  data={item}
                  dismissReminder={dismissReminder}
                />
              ))}
              {initialNotifications?.map((item: any, index: any) => (
                <FlagTemplate
                  key={index}
                  data={item}
                  dismissFlags={dismissFlags}
                />
              ))}
              <>
                {additionalReminders?.map((item: any, index: any) => (
                  <ReminderTemplate
                    key={index + initialReminders.length}
                    data={item}
                    dismissReminder={dismissReminder}
                  />
                ))}
                {additionalNotifications?.map((item: any, index: any) => (
                  <FlagTemplate
                    key={index + initialNotifications.length}
                    data={item}
                    dismissFlags={dismissFlags}
                  />
                ))}
              </>
            </>
          )}
          {activeTab === 'closed' && (
            <>
              {closedReminders?.map((item: any, index: any) => (
                <ReminderTemplate
                  key={index}
                  data={item}
                  dismissReminder={dismissReminder}
                />
              ))}
              {closedTasks?.map((item: any, index: any) => (
                <FlagTemplate
                  key={index}
                  data={item}
                  dismissFlags={dismissFlags}
                />
              ))}
            </>
          )}
        </Container>
      </Content>
    </>
  );
}
const Container = styled.div`
  gap: 10px;
  display: grid;
`;

const Content = styled.div`
  display: flex;
  flex-direction: column;
`;
export default Tabs;
