import { Fragment, useEffect } from 'react'

import isEmpty from 'lodash/isEmpty'
import map from 'lodash/map'
import flatten from 'lodash/flatten'
import size from 'lodash/size'

import { T9n } from 'features/T9n'
import type { PlaylistOption } from 'features/MatchPage/types'
import { useMatchPageStore } from 'features/MatchPage/store'
import { CircleAnimationBar } from 'features/CircleAnimationBar'
import type { MatchInfo } from 'requests'

import { EventsList } from '../EventsList'
import {
  BlockTitle,
  Wrapper,
  HalfList,
  HalfEvents,
  Tabs,
  Tab,
  LikeToggle,
  Filters,
  ButtonsBlock,
  HoverTooltip,
  EpisodesCount,
  SelectedEpisodes,
  WatchButton,
} from './styled'

type Props = {
  onSelect: (option: PlaylistOption) => void,
  profile: MatchInfo,
  selectedPlaylist?: PlaylistOption,
}

export const TabEvents = ({
  onSelect,
  profile,
  selectedPlaylist,
}: Props) => {
  const {
    activeStatus,
    countOfFilters,
    disablePlayingEpisodes,
    isEmptyFilters,
    isLiveMatch,
    likeImage,
    likeToggle,
    plaingOrder,
    playEpisodes,
    reversedGroupEvents,
    setCircleAnimation,
    setReversed,
    setUnreversed,
    setWatchAllEpisodesTimer,
    togglePopup,
    watchAllEpisodesTimer,
  } = useMatchPageStore()

  useEffect(() => {
    setCircleAnimation((state) => ({
      ...state,
      plaingOrder,
    }))
  }, [setCircleAnimation, plaingOrder])

  if (!profile) return null

  return (
    <Wrapper>
      <Fragment>
        <ButtonsBlock>
          <Tabs>
            <T9n t={activeStatus ? 'from_start_match' : 'from_end_match'} />
            <Tab
              active={activeStatus}
              onClick={isLiveMatch ? setReversed : setUnreversed}
            />
            <Tab
              active={!activeStatus}
              onClick={isLiveMatch ? setUnreversed : setReversed}
            />
          </Tabs>
          <LikeToggle src={likeImage} onClick={likeToggle} />
          <Filters active={!isEmptyFilters} onClick={togglePopup}>
            <HoverTooltip>
              <T9n t='filter_match_events' />
            </HoverTooltip>
          </Filters>
        </ButtonsBlock>
        {countOfFilters !== 0 && size(flatten(reversedGroupEvents)) !== 0 && (
          <SelectedEpisodes>
            <EpisodesCount>
              {size(flatten(reversedGroupEvents))} <T9n t='episodes_selected' />
            </EpisodesCount>
            <WatchButton onClick={() => playEpisodes()}>
              <T9n t='watch_all' />
            </WatchButton>
            {watchAllEpisodesTimer && (
              <CircleAnimationBar />
            )}
          </SelectedEpisodes>
        )}
        {isEmpty(reversedGroupEvents)
          ? (
            <BlockTitle>
              <T9n t='no_data' />
            </BlockTitle>
          ) : (
            <HalfList>
              {map(reversedGroupEvents, (halfEvents, idx) => {
                const firstEvent = halfEvents[0]
                const isFirstBlock = idx === 0

                return (
                  <HalfEvents key={firstEvent.h}>
                    {!isFirstBlock && (
                      <BlockTitle>
                        <T9n t='half_time' />
                      </BlockTitle>
                    )}
                    <EventsList
                      disablePlayingEpisodes={disablePlayingEpisodes}
                      events={halfEvents}
                      onSelect={onSelect}
                      profile={profile}
                      selectedPlaylist={selectedPlaylist}
                      setWatchAllEpisodesTimer={setWatchAllEpisodesTimer}
                    />
                  </HalfEvents>
                )
              })}
            </HalfList>
          )}
      </Fragment>
    </Wrapper>
  )
}
