import { Fragment } from 'react'

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

import { PAGES } from 'config'
import { isProduction } from 'config/env'
import { userAccountLexics } from 'config/lexics/userAccount'

import { useAuthStore } from 'features/AuthStore'

import { usePageLogger } from 'hooks/usePageLogger'

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

import {
  client,
  isInSportsClient,
  isInstatClient,
  isLffClient,
} from 'config/clients'

import { Header } from './components/Header'
import { PagePersonalInfo } from './components/PagePersonalInfo'
import { PageBankCards } from './components/PageBankCards'
import { PageSubscriptions } from './components/PageSubscriptions'
import { PagePaymentsHistory } from './components/PagePaymentsHistory'
import { ScoreSwitch } from './components/ScoreSwitch'
import {
  Aside,
  Body,
  ContentWrapper,
  Navigations,
  StyledLink,
  UserAccountWrapper,
  ScButtonGetHighlight,
} from './styled'
import { CompanyInfo } from '../CompanyInfo'
import { PoweredByInsports } from './components/PoweredByInsports/PoweredByInsports'

const UserAccount = () => {
  const { user } = useAuthStore()
  usePageLogger(PAGES.useraccount)
  useLexicsConfig(userAccountLexics)

  return (
    <UserAccountWrapper>
      <Header />
      <Body>
        <Aside>
          <Navigations>
            <StyledLink to={`${PAGES.useraccount}/personal-info`}>
              <T9n t='personal_info' />
            </StyledLink>
            {!isLffClient && (
              <Fragment>
                <StyledLink
                  disabled={user?.profile?.country_code === 'BR'}
                  to={`${PAGES.useraccount}/bank-cards`}
                >
                  <T9n t='bank_card' />
                </StyledLink>
                <StyledLink to={`${PAGES.useraccount}/subscriptions`}>
                  <T9n t='my_subscriptions' />
                </StyledLink>
                <StyledLink
                  to={`${PAGES.useraccount}/payment-history`}
                >
                  <T9n t='payment_history' />
                </StyledLink>
                <StyledLink
                  disabled={isProduction || client.userAccountLinksDisabled}
                  to={`${PAGES.useraccount}/devices`}
                >
                  <T9n t='my_devices' />
                </StyledLink>
                {!isLffClient && !isInSportsClient && (
                  <StyledLink
                    target='_blank'
                    to={{ pathname: client.about_the_project ?? PAGES.about_the_project }}
                  >
                    <T9n t='about_the_project' />
                  </StyledLink>
                )}
              </Fragment>
            )}
            <ScoreSwitch />
            {!client.disabledHighlights && (
              <Link to={`${PAGES.highlights}`}>
                <ScButtonGetHighlight>
                  <T9n t='get_highlights' />
                </ScButtonGetHighlight>
              </Link>
            )}
          </Navigations>
        </Aside>
        <ContentWrapper>
          <Route path={`${PAGES.useraccount}/personal-info`}>
            <PagePersonalInfo />
          </Route>
          <Route path={`${PAGES.useraccount}/bank-cards`}>
            <PageBankCards />
          </Route>
          <Route path={`${PAGES.useraccount}/subscriptions`}>
            <PageSubscriptions />
          </Route>
          <Route path={`${PAGES.useraccount}/payment-history`}>
            <PagePaymentsHistory />
          </Route>
          <CompanyInfo clientName={client.name} textAlign='left' />
        </ContentWrapper>
      </Body>
      {!isInstatClient && !isInSportsClient && <PoweredByInsports />}
    </UserAccountWrapper>
  )
}

export default UserAccount
