import { getGetServerSideProps } from '@/api/ssrApollo'
import { Form, ClientInput, ClientCheckbox, PasswordInput } from '@/components/form'
import { CenterLayout } from '@/components/layout'
import { WalletButtonBar, WalletCard } from '@/components/wallet-card'
import { lnbitsSchema } from '@/lib/validate'
import { useLNbits } from '@/components/webln/lnbits'
import { WalletSecurityBanner } from '@/components/banners'
import WalletLogs from '@/components/wallet-logs'
import { Wallet } from '@/lib/constants'
import useLocalState from '@/components/use-local-state'
import { useMe } from '@/components/me'
import { useToast } from '@/components/toast'
import { useRouter } from 'next/router'
import { Status } from '@/components/webln'

export const getServerSideProps = getGetServerSideProps({ authRequired: true })

export default function LNbits () {
  const me = useMe()
  const toaster = useToast()
  const router = useRouter()

  let storageKey = 'webln:provider:lnbits'
  if (me) {
    storageKey = `${storageKey}:${me.id}`
  }
  const [config, setConfig, clearConfig] = useLocalState(storageKey)
  const status = config ? Status.Initialized : undefined

  return (
    <CenterLayout>
      <h2 className='pb-2'>LNbits</h2>
      <h6 className='text-muted text-center pb-3'>use LNbits for payments</h6>
      <WalletSecurityBanner />
      <Form
        initial={{
          url: config?.url || '',
          adminKey: config?.adminKey || '',
          isDefault: config?.isDefault || false
        }}
        schema={lnbitsSchema}
        onSubmit={async ({ isDefault, ...values }) => {
          try {
            await setConfig(values)
            toaster.success('saved settings')
            router.push('/settings/wallets')
          } catch (err) {
            console.error(err)
            toaster.danger('failed to attach: ' + err.message || err.toString?.())
          }
        }}
      >
        <ClientInput
          initialValue={config?.url}
          label='lnbits url'
          name='url'
          required
          autoFocus
        />
        <PasswordInput
          initialValue={config?.adminKey}
          label='admin key'
          name='adminKey'
          newPass
          required
        />
        <ClientCheckbox
          disabled={false}
          initialValue={false}
          label='default payment method'
          name='isDefault'
        />
        <WalletButtonBar
          status={status} onDelete={async () => {
            try {
              clearConfig()
              toaster.success('saved settings')
              router.push('/settings/wallets')
            } catch (err) {
              console.error(err)
              toaster.danger('failed to detach: ' + err.message || err.toString?.())
            }
          }}
        />
      </Form>
      <div className='mt-3 w-100'>
        <WalletLogs wallet={Wallet.LNbits} embedded />
      </div>
    </CenterLayout>
  )
}

export function LNbitsCard () {
  const { status } = useLNbits()
  return (
    <WalletCard
      title='LNbits'
      badges={['send only', 'non-custodialish']}
      provider='lnbits'
      status={status}
    />
  )
}