import React, { useState } from 'react';
import { SafeScreen, Visible } from 'components';
import { useResponsiveLayout } from 'hooks';
import { Flex, ScrollView } from 'components/layout';
import { BottomBar, SideBarRight, Tabs, TopBar } from 'components/dashboard';
import { Search } from 'components/top-bar';
import { TabsView } from './tabs-view';
import { HappeningNow } from './happening-now';

export const Dashboard: React.FC = () => {
  const { isDesktop, isTabletLG, isMobile } = useResponsiveLayout();
  const [activeTab, setActiveTab] = useState(0);

  const isShowHappening = (isDesktop || isTabletLG) && activeTab === 0;
  const showDashboardMock = false;
  const tabs = [
    {
      title: 'Home',
      index: 0,
    },
    {
      title: 'Upcoming',
      index: 1,
    },
    {
      title: 'My Spaces',
      index: 2,
    },
    {
      title: 'Explore Spaces',
      index: 3,
    },
  ];

  return (
    <SafeScreen edges={['bottom']}>
      <TopBar
        leftElement={
          <Tabs variant="default" tabs={tabs} activeTab={activeTab} setActiveTab={setActiveTab} />
        }
        rightElement={<Search />}
        isStatusBarIncluded={true}
      />

      <Visible if={showDashboardMock}>
        <>
          <ScrollView>
            <TabsView activeTab={activeTab} />
          </ScrollView>
          <Visible if={isShowHappening}>
            <SideBarRight variant="float">
              <HappeningNow variant="float" />
            </SideBarRight>
          </Visible>
        </>
      </Visible>
      <Visible if={!showDashboardMock}>
        <Flex flexGrow={1} />
      </Visible>

      <Visible if={isMobile}>
        <BottomBar />
      </Visible>
    </SafeScreen>
  );
};