import { Form, Input, SubmitButton } from '../components/form'
import * as Yup from 'yup'
import { Alert, InputGroup } from 'react-bootstrap'
import { useMe } from '../components/me'
import LayoutCenter from '../components/layout-center'
import { useState } from 'react'
import { gql, useMutation } from '@apollo/client'

export const SettingsSchema = Yup.object({
  tipDefault: Yup.number().typeError('must be a number').required('required')
    .positive('must be positive').integer('must be whole')
})

export default function Settings () {
  const me = useMe()
  const [success, setSuccess] = useState()
  const [setSettings] = useMutation(
    gql`
      mutation setSettings($tipDefault: Int!) {
        setSettings(tipDefault: $tipDefault)
      }`
  )

  return (
    <LayoutCenter>
      <h2 className='mb-5 text-left'>settings</h2>
      <Form
        initial={{
          tipDefault: me?.tipDefault || 21
        }}
        schema={SettingsSchema}
        onSubmit={async ({ tipDefault }) => {
          await setSettings({ variables: { tipDefault: Number(tipDefault) } })
          setSuccess('settings saved')
        }}
      >
        {success && <Alert variant='info' onClose={() => setSuccess(undefined)} dismissible>{success}</Alert>}
        <Input
          label='tip default'
          name='tipDefault'
          required
          autoFocus
          append={<InputGroup.Text className='text-monospace'>sats</InputGroup.Text>}
        />
        <div className='d-flex'>
          <SubmitButton variant='info' className='ml-auto mt-1 px-4'>save</SubmitButton>
        </div>
      </Form>
    </LayoutCenter>
  )
}