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

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

import { usePageLogger } from 'hooks/usePageLogger'

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

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 { LogoutButton } from './components/LogoutButton'
import {
  UserAccountWrapper,
  ContentWrapper,
  Body,
  Aside,
  Navigations,
  StyledLink,
} from './styled'

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

  return (
    <UserAccountWrapper>
      <Header />
      <Body>
        <Aside>
          <Navigations>
            <StyledLink to={`${PAGES.useraccount}/personal-info`}>
              <T9n t='personal_info' />
            </StyledLink>
            <StyledLink to={`${PAGES.useraccount}/bank-cards`}>
              <T9n t='bank_card' />
            </StyledLink>
            <StyledLink disabled={isProduction} to={`${PAGES.useraccount}/subscriptions`}>
              <T9n t='my_subscriptions' />
            </StyledLink>
            <StyledLink disabled={isProduction} to={`${PAGES.useraccount}/payment-history`}>
              <T9n t='payment_history' />
            </StyledLink>
            <StyledLink disabled={isProduction} to={`${PAGES.useraccount}/devices`}>
              <T9n t='my_devices' />
            </StyledLink>

            <ScoreSwitch />
          </Navigations>
          <LogoutButton />
        </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>
        </ContentWrapper>
      </Body>
    </UserAccountWrapper>
  )
}

export default UserAccount
