import ChangePasswordSetting from '@/clientsettings/components/ChangePassword'
import ColorMode from '@/clientsettings/components/ColorMode'
import Connection from '@/clientsettings/components/Connection'
import Experimental from '@/clientsettings/components/Experimental'
import NotificationSystem from '@/clientsettings/components/NotificactionSystem'
import NotificationLimit from '@/clientsettings/components/NotificationLimit'
import { useExperimentalV2 } from '@/clientsettings/vars/experimentalV2'
import UserDetailRow from '@/users/UserDetail/UserDetailRow'
import { useSetPageTitle } from '@/utils'
import { Section, SectionCard } from '@blueprintjs/core'
import { css } from '@emotion/css'
import useAuthIdentity from '@inject/graphql/auth'
import CenteredSpinner from '@inject/shared/components/CenteredSpinner'
import Container from '@inject/shared/components/Container'
import ErrorLog from '@inject/shared/notification/ErrorLog'

const wrapper = css`
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
`

const sectionBody = css`
  display: flex;
  flex-direction: column;
  gap: 1rem;
`

export const Pending = () => <CenteredSpinner />

const Settings = () => {
  useSetPageTitle('Settings')
  const experimental = useExperimentalV2()
  const { whoAmI } = useAuthIdentity()

  return (
    <Container className={wrapper}>
      <Section title='Settings' icon='cog'>
        <SectionCard padded title='User'>
          <Section title={whoAmI?.username} icon='user'>
            <SectionCard padded>
              {whoAmI?.dateJoined && (
                <UserDetailRow
                  name='Date joined'
                  value={new Date(whoAmI?.dateJoined || '')}
                />
              )}
              {whoAmI?.lastLogin && (
                <UserDetailRow
                  name='Last login'
                  value={new Date(whoAmI?.lastLogin || '')}
                />
              )}
              {whoAmI?.tags && (
                <UserDetailRow
                  name='Tags'
                  value={(whoAmI?.tags.map(tag => tag.name) || []).join(', ')}
                />
              )}
            </SectionCard>
          </Section>
        </SectionCard>
        {experimental && (
          <SectionCard padded>
            {' '}
            {/* remove experimental when changePassword bug gets fixed :) */}
            <ChangePasswordSetting />
          </SectionCard>
        )}
        <SectionCard padded className={sectionBody}>
          <ColorMode />
          <Experimental />
          {experimental && <Connection />}
          {experimental && <NotificationLimit />}
          {experimental && <NotificationSystem />}
        </SectionCard>
        <SectionCard padded>
          <ErrorLog />
        </SectionCard>
      </Section>
    </Container>
  )
}

export default Settings
