import { Fragment, useMemo } from 'react'

import { T9n } from 'features/T9n'
import { useLexicsConfig } from 'features/LexicsStore'

import { PAGES } from 'config'
import { ClientNames } from 'config/clients/types'

import {
  CompanyInfoLink,
  CompanyInfoText,
  CompanyInfoWrapper,
} from './styled'
import { lexics } from './config'

export type TCompanyInfo = {
  clientName: ClientNames,
  textAlign?: 'center' | 'left',
  width?: string,
}

export const CompanyInfo = ({
  clientName,
  textAlign = 'left',
  width = '100%',
}: TCompanyInfo) => {
  useLexicsConfig(lexics)

  const companyInfoContent = useMemo(() => {
    switch (clientName) {
      case ClientNames.Facr:
        return (
          <Fragment>
            <CompanyInfoText>
              <T9n t='16689' />
            </CompanyInfoText>
            <CompanyInfoText>
              <T9n t='19588' />
            </CompanyInfoText>
          </Fragment>
        )
      case ClientNames.Tunisia:
        return ''
      case ClientNames.Lff:
        return (
          <Fragment>
            <CompanyInfoText>
              <T9n t='19590' />
            </CompanyInfoText>
          </Fragment>
        )
      case ClientNames.Insports:
        return (
          <Fragment>
            <CompanyInfoText>
              <T9n t='18081' />
            </CompanyInfoText>
            <CompanyInfoText>
              <T9n t='18082' />
            </CompanyInfoText>
            <CompanyInfoText>
              <T9n t='18083' />
            </CompanyInfoText>
            <CompanyInfoText>
              <T9n t='18084' />
            </CompanyInfoText>
          </Fragment>
        )
      default:
        return (
          <Fragment>
            <CompanyInfoText>
              <T9n t='18081' />{' | '}
              <CompanyInfoLink
                to={{ pathname: PAGES.about_the_project }}
                target='_blank'
              >
                <T9n t='18170' />
              </CompanyInfoLink>
            </CompanyInfoText>
            <CompanyInfoText>
              <T9n t='18082' />
            </CompanyInfoText>
            <CompanyInfoText>
              <T9n t='18083' />
            </CompanyInfoText>
            <CompanyInfoText>
              <T9n t='18084' />
            </CompanyInfoText>
          </Fragment>
        )
    }
  }, [clientName])

  return (
    <CompanyInfoWrapper style={{ maxWidth: width, textAlign }}>
      {companyInfoContent}
    </CompanyInfoWrapper>
  )
}