import React, { useEffect, useState } from 'react';
import styled from '@emotion/styled';
import { Link } from 'react-router-dom';
import { Stack } from '@mui/material';
import { ToggleTabs, useLocalStore } from '@components';

const OuterContainer = styled(Stack)`
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  padding: 10px 10px 0px 0px;
`;

const fields = {
  departmentInformation: {
    title: 'Information',
    tab: 'department',
    fields: []
  },
  departmentPermissions: {
    title: 'Permissions',
    tab: 'department',
    fields: []
  },
  departmentManagers: {
    title: 'Managers',
    tab: 'department',
    fields: []
  },
  departmentSubscriptions: {
    title: 'Subscriptions',
    tab: 'department',
    fields: []
  },
  myInformation: {
    title: 'Information',
    tab: 'personal',
    fields: []
  },
  myNotifications: {
    title: 'Notifications',
    tab: 'personal',
    fields: []
  },
  departmentNotifications: {
    title: 'Notifications',
    tab: 'department',
    fields: []
  },
}

export const Settings = () => {
  const { user } = useLocalStore();
  const tabs = [
      {
          label: 'Personal',
          value: 'personal'
      },
      {
          label: 'Department',
          value: 'department'
      }
  ];

  const [tabValue, setTabValue] = useState(tabs[0]);

  useEffect(() => {
    document.title = 'ShiftSync | Settings';
  }, []);

  return (
    <div>
      {user?.administrator ? (
        <OuterContainer>
          <ToggleTabs 
            tabs={tabs}
            tabValue={tabValue}
            setTabValue={setTabValue}
            tabColor='#4D79FF'
          />
        </OuterContainer>
      ) : null }
      {tabValue?.value === 'personal' ? (
        <div>
          <h1>{`Settings Page${user?.administrator ? ` - ${tabValue?.label}` : ''}`}</h1>
          <Link to="/">Go to Home</Link>
        </div>
      ) : (
        <div>
          <h1>Settings Page - Organization</h1>
          <Link to="/">Go to Home</Link>
        </div>
      )}
    </div>
  );
};