import { Layout } from 'antd'
import classnames from 'classnames'
import Loading from 'components/Loading'
import { useWindowSize } from 'hooks'
import React, { ReactNode, Suspense, useState, MouseEvent } from 'react'
import { ContainerProvider } from 'utils/container'

import './MainLayout.scss'
import useNavUser from 'hooks/useNavUser'
import useNavMenu from 'hooks/useNavMenu'

import { MenuItem, Navbar } from '@komi-app/creator-ui'
import { RequestAProfileModal } from 'components/PreviewLayoutHeader/RequestAProfileModal'
import { SEGMENT_EVENTS } from '../../constants/segment'
import { getNavBarTrackingProperties } from '../PreviewLayout/PreviewLayout'
import { useAnalytics } from '../../hooks/useAnalytics'
import { FLAGS, useFeatureIsOn } from '@komi-app/flags-sdk'
import { useCreatorTracking, CreatorEvent } from '@komi-app/analytics-sdk'

interface IProps {
  children?: ReactNode
  isDarkMode?: boolean
  isExperienceFlow?: boolean
  isLivestreamFLow?: boolean
  className?: string
}

const { Content } = Layout

const MainLayout = ({
  children,
  isExperienceFlow = false,
  isLivestreamFLow = false,
  className = '',
  isDarkMode
}: IProps) => {
  const { height } = useWindowSize()
  const { sendSegmentEvent } = useAnalytics()

  const layoutClass = classnames({
    'main-layout': true,
    [className]: true,
    'main-layout--experience': isExperienceFlow,
    'main-layout--livestream': isLivestreamFLow,
    'main-layout--dark-mode': isDarkMode
  })

  const mainPageContentClass = classnames({
    'main-layout__page-content': true,
    'main-layout__page-content--no-sidebar': true
  })

  const mainLayoutContentClass = classnames(
    'main-layout__content',
    'main-layout-creator-ui'
  )

  //move to new comp with navbar?
  const [requestNewProfileModalIsOpen, setRequestNewProfileModalIsOpen] =
    useState(false)

  const navUser = useNavUser()
  const navMenu = useNavMenu()
  const useAnalyticsSDK = useFeatureIsOn(FLAGS.USE_ANALYTICS_SDK_TALENT)
  const { createTracker } = useCreatorTracking()
  const navBarClick = createTracker(CreatorEvent.NAV_BAR_CLICK)

  // Navlink Handler, that sends Segment events before redirecting to link <- also replaces OnClickAdmin Dashboard
  const onClickItem = (e: MouseEvent, item: MenuItem) => {
    const properties = getNavBarTrackingProperties(item)
    useAnalyticsSDK
      ? navBarClick({
          type: properties?.Type,
          name: properties?.Name
        })
      : sendSegmentEvent(SEGMENT_EVENTS.NAV_BAR_CLICK, properties)

    if ('key' in item) {
      const { key } = item

      switch (key) {
        case 'request-profile':
          return setRequestNewProfileModalIsOpen(true)
      }
    }
  }

  return (
    <Layout
      className={layoutClass}
      style={{
        minHeight: `${height}px`
      }}
    >
      <div className="navbar-styles">
        <Navbar onClickItem={onClickItem} User={navUser} Menu={navMenu} />
        <RequestAProfileModal
          visible={requestNewProfileModalIsOpen}
          onCancel={() => setRequestNewProfileModalIsOpen(false)}
          onOk={() => setRequestNewProfileModalIsOpen(false)}
        />
      </div>
      <Content>
        <Layout className={mainLayoutContentClass}>
          <div className="fluid-container d--flex flex--1">
            <ContainerProvider>
              <Content className={mainPageContentClass}>
                <Suspense fallback={<Loading />}>{children}</Suspense>
              </Content>
            </ContainerProvider>
          </div>
        </Layout>
      </Content>
    </Layout>
  )
}

export default MainLayout
