import { Tab, Tabs } from '@mui/material';
import { useTheme } from '@mui/system';
import React, { useEffect, useRef, useState } from 'react';
import axios from '../../utils/axios';
import { Corporate } from '../../@types/corporates';

import { Link, useNavigate, useParams } from 'react-router-dom';

type Props = {
  position: string;
};

export default function CorporateTabNavigations({ position }: Props) {
  const theme = useTheme();
  const navigate = useNavigate();
  const [corporate, setCorporate] = useState<Corporate>();

  const { corporate_id } = useParams();

  const [currentTab, setCurrentTab] = React.useState(0);

  const mainTabItems = [
    {
      path: '',
      label: 'Dashboard',
    },
    // {
    //   'path' : 'corporate-plans',
    //   'label': 'Corporate Plan',
    // },
    {
      path: 'services',
      label: 'Services',
    },
    {
      path: 'plans',
      label: 'Plans',
    },
    // {
    //   'path' : 'corporate-benefits',
    //   'label': 'Corporate Benefit',
    // },
    {
      path: 'benefits',
      label: 'Benefit',
    },
    // {
    //   path: 'divisions',
    //   label: 'Division',
    // },
    {
      path: 'members',
      label: 'Member List',
    },
    {
      path: 'diagnosis-exclusions',
      label: 'Exclusion',
    },
    {
      path: 'hospitals',
      label: 'Hospital',
    },
    {
      path: 'formulariums',
      label: 'Formularium',
    },
    // {
    //   path: 'claim-history',
    //   label: 'Claim History',
    // },
  ];
  useEffect(() => {
    console.log(position);
    let currentIndex = mainTabItems.findIndex((item) => item.path === position);
    setCurrentTab(currentIndex);
  }, []);

  return (
    <Tabs
      // theme={theme}
      value={currentTab}
      // data={corporate}
      // onChange={(event, newValue) => false}
      variant="scrollable"
      scrollButtons
      allowScrollButtonsMobile
      aria-label="scrollable force tabs example"
    >
      {mainTabItems.map((tabItem, index) => (
        <Tab
          key={index}
          onClick={() => {
            navigate('/corporates/' + corporate_id + '/' + mainTabItems[index].path);
          }}
          label={tabItem.label}
        />
      ))}
    </Tabs>
  );
}
