import { useMemo } from 'react'

import { Link } from 'react-router-dom'

import type { ObjectWithName } from 'features/Name'

import {
  PAGES,
  ProfileTypes,
  URL_AWS,
} from 'config'
import { client } from 'config/clients'
import { ClientNames } from 'config/clients/types'

import { checkPage } from 'helpers/checkPage'

import { T9n } from 'features/T9n'
import { useName } from 'features/Name'

import { StarIcon } from './components/StarIcon'
import {
  Wrapper,
  Details,
  FavoriteButton,
  Logo,
  InfoName,
  InfoItems,
  ProfileName,
  InfoFlag,
  StyledLink,
  SсBtnWrapper,
  SсGetHighlightBtn,
  DetailsWrapper,
} from './styled'
import { useProfileCard } from './hooks'

export type ProfileType = {
  profile: ObjectWithName & {
    additionalInfo: ObjectWithName & {
      id: number,
      tournamentId?: number,
    },
  },
}

export const ProfileCard = ({ profile }: ProfileType) => {
  const name = useName(profile || {})

  const {
    isFavorite,
    profileId,
    profileType,
    setPlayerHighlight,
    sportType,
    toggleFavorites,
  } = useProfileCard()

  const tournamentId = profile.additionalInfo?.tournamentId
  const isPlayerPage = checkPage(PAGES.player)

  const isGetHighLightShown = useMemo(() => {
    switch (client.name) {
      case ClientNames.Facr:
        return false
      default:
        return true
    }
  }, [])

  return (
    <Wrapper>
      <Logo
        id={profileId}
        alt={name}
        profileType={profileType}
        sportType={sportType}
      />
      <DetailsWrapper>
        <Details>
          <ProfileName>{name}</ProfileName>
          <InfoItems>
            <InfoFlag src={`${URL_AWS}/media/flags/${profile.additionalInfo.id}.png`} />
            {tournamentId
              ? (
                <StyledLink
                  id={tournamentId}
                  profileType={ProfileTypes.TOURNAMENTS}
                  sportType={sportType}
                >
                  <InfoName nameObj={profile.additionalInfo} />
                </StyledLink>
              )
              : <InfoName nameObj={profile.additionalInfo} />}
          </InfoItems>
        </Details>
        <SсBtnWrapper>
          <FavoriteButton isFavorite={isFavorite} onClick={toggleFavorites}>
            <StarIcon isFavorite={isFavorite} />
            <T9n t='add_to_favorites' />
          </FavoriteButton>
          {!client.disabledHighlights && isPlayerPage && isGetHighLightShown && (
            <Link to={PAGES.highlights}>
              <SсGetHighlightBtn
                onClick={() => setPlayerHighlight({
                  profile: {
                    ...profile,
                    id: profileId,
                  },
                  sportType,
                })}
              >
                <T9n t='get_highlights' />
              </SсGetHighlightBtn>
            </Link>
          )}
        </SсBtnWrapper>
      </DetailsWrapper>
    </Wrapper>
  )
}