import { MDASH } from 'config'

import styled from 'styled-components/macro'

import type { MatchInfo } from 'requests'
import type { PlaylistOption } from 'features/MatchPage/types'
import type { Settings } from 'features/MatchPopup'
import { PlaylistTypes } from 'features/MatchPage/types'
import { MediaQuery } from 'features/MediaQuery'
import { Name } from 'features/Name'
import { T9n } from 'features/T9n'
import {
  CloseButton,
  Header,
  HeaderActions,
  HeaderTitle,
} from 'features/PopupComponents'

import { SettingsDesktop } from '../SettingsDesktop'

const TitleWrapper = styled(HeaderTitle)`
  display: flex;
  flex-direction: column;
  line-height: 32px;
`

const TeamNames = styled.span`
  font-weight: normal;
`

type ContentProps = {
  height?: number,
}

const Content = styled.div<ContentProps>`
  width: 100%;
`

type Props = {
  closePopup: () => void,
  onWatchEpisodesClick: (settings: Settings) => void,
  profile: MatchInfo,
  selectedPlaylist?: PlaylistOption,
}

export const SettingsPopup = ({
  closePopup,
  onWatchEpisodesClick,
  profile,
  selectedPlaylist,
}: Props) => {
  if (!profile || !selectedPlaylist) return null

  const isMatchPlaylist = selectedPlaylist.type === PlaylistTypes.MATCH

  return (
    <Content>
      {!isMatchPlaylist
        ? (
          <Header>
            <MediaQuery maxDevice='mobile'>
              <HeaderTitle>
                <T9n t='match_settings' />
              </HeaderTitle>
            </MediaQuery>
            <MediaQuery minDevice='tablet'>
              <HeaderActions position='right'>
                <CloseButton onClick={closePopup} />
              </HeaderActions>
              <TitleWrapper>
                <Name nameObj={selectedPlaylist} />
                <TeamNames>
                  <Name nameObj={profile.team1} />
                  {` ${MDASH} `}
                  <Name nameObj={profile.team2} />
                </TeamNames>
              </TitleWrapper>
            </MediaQuery>
          </Header>
        )
        : (
          <Header>
            <HeaderActions position='right'>
              <CloseButton onClick={closePopup} />
            </HeaderActions>
          </Header>
        )}
      <MediaQuery minDevice='tablet'>
        <SettingsDesktop
          onWatchEpisodesClick={onWatchEpisodesClick}
          isMatchPlaylist={isMatchPlaylist}
        />
      </MediaQuery>
    </Content>
  )
}
