import { useAutoCallback } from "hooks.macro"
import { useTranslation } from "react-i18next"
import { memo } from "react"
import { gql, useMutation } from "~/generated/graphql"
import { FormEntry } from "./styled"
import { DangerPill } from "~/shared/styled"
import { GET_FILES } from "../FileTree"

const DELETE_ALL_FILES = gql<"DeleteAllStyles">`
  mutation DeleteAllStyles {
    deleteAllFiles
  }
`

export const SettingActions = memo(() => {
  const { t } = useTranslation()
  const [deleteAllFiles] = useMutation(DELETE_ALL_FILES, {
    refetchQueries: [GET_FILES],
  })

  return (
    <>
      <p />
      <FormEntry>
        <DangerPill
          onClick={useAutoCallback(async () => {
            if (!confirm(t("settings.doYouReallyWantToDeleteAllFiles"))) {
              return
            }
            await deleteAllFiles()
          })}
        >
          {t("settings.deleteAllFiles")}
        </DangerPill>
      </FormEntry>
    </>
  )
})
