import {
  Col,
  Container,
  FlatList,
  Row,
  ScrollView,
  StyleSystemThemedProps,
} from 'components/layout';
import { Checkbox, CheckGroup, CloseFullScreen, CloseThick, Filter, OpenFullScreen } from 'icons';
import { metrics } from 'config';
import { Card, Divider, Fab, Visible, Dropdown, Button, Heading, BackHeader } from 'components';
import { useResponsiveLayout, useRouting } from 'hooks';
import { Notification, NotificationFragment } from 'expo-schema';
import { isNotificationOpenVar } from 'state-management/dialogs';
import { useCallback, useState } from 'react';
import { NavigationRoutes } from 'navigation/enum';
import { Tabs } from 'components/dashboard';
import { Item } from '../item';

const { STYLES } = metrics;

const Action = () => {
  return (
    <Dropdown
      value="Rooms"
      items={['Rooms']}
      sizeVariant="small"
      variant="outline"
      dropdownVariant="outline"
      placeholder="Activity"
      onChangeValue={() => {}}
    />
  );
};

export const List: React.FC<NotificationType> = ({ variant, notifications, ...props }) => {
  const [activeTab, setActiveTab] = useState(0);
  const isSurface = variant === 'surface';
  const { isMobile, height } = useResponsiveLayout();
  const { navigateTo, routeSegments, navigateBack } = useRouting();

  const isInbox = routeSegments.includes('inbox');
  const parsedHeight = height - STYLES.topBarHeight;
  const width = isSurface ? undefined : STYLES.happeningBarWidth;
  const px = isSurface ? 's' : undefined;

  const windowIcon = isInbox ? (
    <CloseFullScreen colorVariant="caption-01" />
  ) : (
    <OpenFullScreen colorVariant="caption-01" />
  );

  const closeSidebar = () => {
    isNotificationOpenVar(false);
  };

  const toggleInbox = useCallback(() => {
    if (isInbox) {
      navigateBack();
    } else {
      isNotificationOpenVar(false);
      navigateTo(NavigationRoutes.Inbox);
    }
  }, [isInbox, navigateBack, navigateTo]);

  const ActionDesktop = () => {
    return (
      <Row>
        <Fab
          onPress={toggleInbox}
          sizeVariant="medium"
          variant="plain"
          hoverColorVariant="base"
          colorVariant="transparent"
          centerElement={windowIcon}
        />
        <Visible if={false}>
          <Fab
            onPress={closeSidebar}
            sizeVariant="medium"
            variant="plain"
            hoverColorVariant="base"
            colorVariant="transparent"
            centerElement={<CloseThick colorVariant="caption-01" />}
          />
        </Visible>
        <Fab
          onPress={closeSidebar}
          sizeVariant="medium"
          variant="plain"
          hoverColorVariant="base"
          colorVariant="transparent"
          centerElement={<Checkbox colorVariant="caption-01" />}
        />

        <Fab
          onPress={closeSidebar}
          sizeVariant="medium"
          variant="plain"
          hoverColorVariant="base"
          colorVariant="transparent"
          centerElement={<Filter colorVariant="caption-01" />}
        />
      </Row>
    );
  };

  return (
    <Container width={width} overflow="hidden" px={px} {...props} height={parsedHeight}>
      <Visible if={isMobile}>
        <Heading my="xs" title="Notifications" isAction={true} action={<Action />} />
      </Visible>
      <Container>
        <Divider colorVariant="divider-01" directionVariant="horizontal" height={1} />
      </Container>
      <Card flex={1} variant="plain" shapeVariant="square" colorVariant="base-01">
        <Visible if={!isMobile}>
          <Container>
            <BackHeader
              px="s"
              pr="3xs"
              py="2xs"
              overflow="visible"
              leftElement={
                <Tabs
                  variant="underline"
                  tabs={[
                    { title: 'Open', index: 0 },
                    { title: 'Archive', index: 1 },
                  ]}
                  activeTab={activeTab}
                  setActiveTab={setActiveTab}
                  tabProps={{
                    mr: 'xs',
                    sizeVariant: 'undefined',
                    height: STYLES.headerHeight,
                    borderBottomWidth: 2,
                    borderBottomColor: 'transparent',
                    titleColor: 'caption-01',
                    hoverColorVariant: 'transparent',
                  }}
                  activeTabProps={{
                    borderBottomColor: 'title',
                    titleColor: 'title',
                    titleWeight: 'bold',
                  }}
                />
              }
              isAction={true}
              rightElement={<ActionDesktop />}
            />
            <Container position="absolute" left={0} right={0} bottom={0} zIndex={-1}>
              <Divider directionVariant="horizontal" size={1} colorVariant="divider-01" />
            </Container>
          </Container>
        </Visible>
        <ScrollView flex={1} backgroundColor="base-01">
          <Col>
            <FlatList
              data={notifications}
              keyExtractor={(item) => (item as Notification).id}
              renderItem={(item) => <Item notification={item.item as Notification} />}
            />
          </Col>
        </ScrollView>
        <Container>
          <Divider colorVariant="divider-01" directionVariant="horizontal" size={1} />
        </Container>
        <Visible if={!isInbox}>
          <Button
            onPress={() => {}}
            title="Mark all as read"
            sizeVariant="large"
            titleColor="primary"
            leftElement={<CheckGroup colorVariant="primary" />}
          />
        </Visible>
      </Card>
    </Container>
  );
};

type NotificationType = StyleSystemThemedProps & NotificationProps;
type HappeningNowVariant = 'float' | 'surface';
interface NotificationProps {
  variant: HappeningNowVariant;
  notifications: NotificationFragment[];
}