import { useTranslation } from "react-i18next"
import { gql, useQuery } from "~/generated/graphql"
import type * as types from "~/generated/graphql"
import { Subheading, TabHeader, TabsContainer } from "~/shared/styled"
import { LocalePicker } from "./LocalePicker"
import { SettingActions } from "./Actions"
import { PREFERENCES_FRAGMENT, Preferences } from "./Preferences"

const SETTINGS_TAB_QUERY = gql<"SettingsTabQuery">`
  ${PREFERENCES_FRAGMENT}
  query SettingsTabQuery {
    preferences {
      ...PreferencesFragment
    }
  }
`

const Settings: FC<ClassNameProp & { data: types.SettingsTabQueryQuery }> = ({
  data,
  className,
}) => {
  const { t } = useTranslation()
  return (
    <TabsContainer className={className}>
      <TabHeader>
        <Subheading>{t("tab.settings")}</Subheading>
      </TabHeader>
      <LocalePicker />
      <Preferences data={data} />
      <hr />
      <SettingActions />
    </TabsContainer>
  )
}

export const SettingsTab: FC<ClassNameProp> = props => {
  const { data } = useQuery(SETTINGS_TAB_QUERY)
  if (!data) {
    return null
  }

  return <Settings data={data} {...props} />
}
