import { FC, useCallback } from 'react';
import { Col, Container, Row } from 'components/layout';
import { Profile as ProfileIcon, OrganizationAdmin, Logout, Check } from 'icons';
import { TouchableTile } from 'components/touchable-tile';
import { ColorName } from '@emotion/react';
import { Divider } from 'components/divider';
import { NavigationRoutes } from 'navigation/enum';
import { useProfile, useResponsiveLayout, useRouting } from 'hooks';
import { isProfileActionOpenVar, isProfileOpenVar } from 'state-management/dialogs';
import { logout } from 'utils/auth';
import { Avatar, Text, Visible } from 'components';

export const Content: FC<ContentProps> = ({ closeSheet }) => {
  const { navigateTo } = useRouting();
  const { profile } = useProfile();
  const { isMobile, isTabletSM } = useResponsiveLayout();
  const isSmall = isMobile || isTabletSM;

  const doNavigateTo = useCallback(
    ({ actionType, nav }: NavigateToType) => {
      isProfileActionOpenVar(false);
      closeSheet();
      if (actionType === 'profile' && !isSmall) {
        isProfileOpenVar(true);
      } else if (actionType === 'logout') {
        logout();
      } else {
        navigateTo(nav);
      }
    },
    [closeSheet, isSmall, navigateTo]
  );

  const primaryActions: ActionType[] = [
    {
      id: '1',
      title: 'Profile',
      onPress: () => doNavigateTo({ actionType: 'profile', nav: NavigationRoutes.Profile }),
      leftElement: () => <ProfileIcon />,
    },
    {
      id: '2',
      title: 'Organization Admin',
      onPress: () => doNavigateTo({ actionType: 'orgAdmin', nav: NavigationRoutes.AdminProfile }),
      leftElement: () => <OrganizationAdmin />,
    },
  ];
  const logoutActions: ActionType[] = [
    {
      id: '3',
      title: 'Log Out',
      titleColor: 'body',
      onPress: () => doNavigateTo({ actionType: 'logout', nav: NavigationRoutes.Profile }),
      leftElement: () => <Logout colorVariant="body" />,
    },
  ];
  return (
    <>
      <TouchableTile
        leftElement={
          <Avatar
            uri={profile?.profilePhotoUrl as string}
            title={profile?.name.first}
            sizeVariant="extra-small"
            backgroundColor="primary"
          />
        }
        variant="text"
        sizeVariant="medium"
        mx="2xs"
        px="2xs"
        shapeVariant="round"
        centerElement={
          <Col>
            <Text variant="caption" weightVariant="bold" color="title">
              {profile?.name.first}
            </Text>
            <Text numberOfLines={1} ellipsizeMode="tail" variant="label">
              {profile?.preferredEmail}
            </Text>
          </Col>
        }
        rightElement={
          <Container ml="s">
            <Check />
          </Container>
        }
      />
      <Container>
        <Divider mx="s" my="2xs" colorVariant="divider" directionVariant="horizontal" size={1} />
      </Container>
      {primaryActions.map(({ id, title, titleColor, leftElement, onPress }) => {
        return (
          <TouchableTile
            key={id}
            onPress={onPress}
            variant="text"
            sizeVariant="medium"
            shapeVariant="round"
            mx="2xs"
            px="2xs"
            centerElement={
              <Row alignItems="center">
                <Container mr="s">{leftElement && leftElement()}</Container>
                <Text variant="caption" color={titleColor || 'body'} weightVariant="normal">
                  {title}
                </Text>
                <Divider colorVariant="divider-01" directionVariant="horizontal" />
              </Row>
            }
          />
        );
      })}
      <Container>
        <Divider mx="s" my="2xs" colorVariant="divider" directionVariant="horizontal" size={1} />
      </Container>
      {logoutActions.map(({ id, title, titleColor, leftElement, onPress }) => {
        return (
          <TouchableTile
            key={id}
            onPress={onPress}
            variant="text"
            sizeVariant="medium"
            mx="2xs"
            px="2xs"
            shapeVariant="round"
            centerElement={
              <Row alignItems="center">
                <Container mr="s">{leftElement && leftElement()}</Container>
                <Text variant="caption" color={titleColor || 'body'} weightVariant="normal">
                  {title}
                </Text>
                <Divider colorVariant="divider-01" directionVariant="horizontal" />
              </Row>
            }
          />
        );
      })}
    </>
  );
};
interface NavigateToType {
  actionType: 'profile' | 'orgAdmin' | 'logout';
  nav: any;
}
interface ActionType {
  id: string;
  title?: string;
  caption?: string;
  titleColor?: ColorName;
  onPress?: () => void;
  leftElement?: () => JSX.Element;
}
interface ContentProps {
  closeSheet: () => void;
}