import { Fragment, useMemo } from 'react'

import groupBy from 'lodash/groupBy'
import isEmpty from 'lodash/isEmpty'
import map from 'lodash/map'
import reverse from 'lodash/reverse'
import values from 'lodash/values'

import type { Events, MatchInfo } from 'requests'

import { useToggle } from 'hooks'

import type { PlaylistOption } from 'features/MatchPage/types'
import { T9n } from 'features/T9n'

import { EventsList } from '../EventsList'
import {
  BlockTitle,
  Wrapper,
  HalfList,
  HalfEvents,
  Tabs,
  Tab,
} from './styled'

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

export const TabEvents = ({
  events,
  onSelect,
  profile,
  selectedPlaylist,
}: Props) => {
  const {
    close: setUnreversed,
    isOpen: areEventsReversed,
    open: setReversed,
  } = useToggle()

  const isLiveMatch = profile?.live
  const reverseStatus = (areEventsReversed || isLiveMatch) && (areEventsReversed !== isLiveMatch)
  const reversedGroupEvents = useMemo(() => {
    const groupedEvents = values(
      groupBy(
        reverseStatus
          ? reverse([...events])
          : events,
        ({ h }) => h,
      ),
    )
    return reverseStatus
      ? reverse(groupedEvents)
      : groupedEvents
  }, [events, reverseStatus])
  const activeStatus = isLiveMatch ? areEventsReversed : !areEventsReversed
  if (!profile) return null

  return (
    <Wrapper>
      {isEmpty(events)
        ? (
          <BlockTitle>
            <T9n t='no_data' />
          </BlockTitle>
        )
        : (
          <Fragment>
            <Tabs>
              <Tab
                active={activeStatus}
                onClick={isLiveMatch ? setReversed : setUnreversed}
              >
                <T9n t='from_start_match' />
              </Tab>
              <Tab
                active={!activeStatus}
                onClick={isLiveMatch ? setUnreversed : setReversed}
              >
                <T9n t='from_end_match' />
              </Tab>
            </Tabs>
            <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
                        events={halfEvents}
                        onSelect={onSelect}
                        profile={profile}
                        selectedPlaylist={selectedPlaylist}
                      />
                    </HalfEvents>
                  )
                })
              }
            </HalfList>
          </Fragment>
        )}
    </Wrapper>
  )
}
