import { Route } 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 } 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,
} from './styled'
import { CompanyInfo } from '../CompanyInfo'
import { PoweredByInstat } from './components/PoweredByInstat/PoweredByInstat'

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>
            <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>
            <StyledLink
              target='_blank'
              to={{ pathname: PAGES.about_the_project }}
            >
              <T9n t='about_the_project' />
            </StyledLink>

            <ScoreSwitch />
          </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 textAlign='left' />
        </ContentWrapper>
      </Body>
      {client.name !== 'instat' && <PoweredByInstat />}
    </UserAccountWrapper>
  )
}

export default UserAccount
