import { FC, useState } from 'react';
import { BackHeader, Container, SafeScreen, Text, Visible } from 'components';
import { useResponsiveLayout } from 'hooks';
import { Tabs, TopBar } from 'components/dashboard';
import { TabsView } from './tabs-view';

export const AdminProfile: FC = () => {
  const { isMobile } = useResponsiveLayout();
  const [activeTab, setActiveTab] = useState(0);
  const px = isMobile ? 'xs' : 'm';

  const tabs = [
    {
      title: 'Profile Details',
      index: 0,
    },
    {
      title: 'Subscription and Payments',
      index: 1,
    },
    {
      title: 'Spaces',
      index: 2,
    },
    {
      title: 'Users',
      index: 3,
    },
    {
      title: 'Domains and Security',
      index: 4,
    },
  ];

  return (
    <SafeScreen edges={['top', 'bottom']}>
      <Visible if={!isMobile}>
        <TopBar isStatusBarIncluded={true} />
      </Visible>
      <Visible if={isMobile}>
        <BackHeader
          isBack={true}
          leftElement={
            <Container ml="xs">
              <Text variant="title">My Admin Profile</Text>
            </Container>
          }
        />
      </Visible>
      <Container mt="xs">
        <Tabs
          variant="default"
          tabs={tabs}
          px={px}
          activeTab={activeTab}
          setActiveTab={setActiveTab}
        />
      </Container>
      <TabsView activeTab={activeTab} />
    </SafeScreen>
  );
};