import { getGetServerSideProps } from '@/api/ssrApollo'
import CCInfo from '@/components/info/cc'
import { Form, Input, SubmitButton } from '@/components/form'
import { CenterLayout } from '@/components/layout'
import { useLightning } from '@/components/lightning'
import { useMe } from '@/components/me'
import { useShowModal } from '@/components/modal'
import { usePaidMutation } from '@/components/use-paid-mutation'
import { BUY_CREDITS } from '@/fragments/paidAction'
import { amountSchema } from '@/lib/validate'
import classNames from 'classnames'
import { Button, Col, InputGroup, Row } from 'react-bootstrap'
import RewardSatsInfo from '@/components/info/reward-sats'

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

export default function Credits () {
  const { me } = useMe()
  return (
    <CenterLayout footer footerLinks>
      <Row className='w-100 d-none d-sm-flex justify-content-center'>
        <Col>
          <h2 className='text-end me-1 me-md-3'>
            <div className='text-monospace'>
              {me?.privates?.credits}
            </div>
            <div className='text-muted d-flex align-items-baseline justify-content-end'><CCInfo size={16} /> cowboy credits</div>
            <BuyCreditsButton className='ms-auto' />
          </h2>
        </Col>
        <Col>
          <h2 className='text-start ms-1 ms-md-3'>
            <div className='text-monospace'>
              {me?.privates?.sats - me?.privates?.credits}
            </div>
            <div className='text-muted d-flex align-items-baseline justify-content-start'>sats <RewardSatsInfo size={16} /></div>
            <WithdrawButton className='me-auto' />
          </h2>
        </Col>
      </Row>
      <Row className='w-100 d-flex d-sm-none justify-content-center my-5'>
        <Row className='mb-5'>
          <h2 className='text-start'>
            <div className='text-monospace'>
              {me?.privates?.credits}
            </div>
            <div className='text-muted d-flex align-items-baseline justify-content-start'>cowboy credits <CCInfo size={16} /></div>
            <BuyCreditsButton className='me-auto' />
          </h2>
        </Row>
        <Row>
          <h2 className='text-end'>
            <div className='text-monospace'>
              {me?.privates?.sats - me?.privates?.credits}
            </div>
            <div className='text-muted d-flex align-items-baseline justify-content-end'><RewardSatsInfo size={16} /> sats</div>
            <WithdrawButton className='ms-auto' />
          </h2>
        </Row>
      </Row>
    </CenterLayout>
  )
}

function WithdrawButton ({ className }) {
  return (
    <Button
      variant='success'
      className={classNames('mt-3 d-block', className)}
      style={{ width: 'fit-content' }}
      href='/withdraw'
    >withdraw sats
    </Button>
  )
}

export function BuyCreditsButton ({ className }) {
  const showModal = useShowModal()
  const strike = useLightning()
  const [buyCredits] = usePaidMutation(BUY_CREDITS)

  return (
    <>
      <Button
        onClick={() => showModal(onClose => (
          <Form
            initial={{
              amount: 10000
            }}
            schema={amountSchema}
            onSubmit={async ({ amount }) => {
              const { error } = await buyCredits({
                variables: {
                  credits: Number(amount)
                },
                onCompleted: () => {
                  strike()
                }
              })
              onClose()
              if (error) throw error
            }}
          >
            <Input
              label='amount'
              name='amount'
              type='number'
              required
              autoFocus
              append={<InputGroup.Text className='text-monospace'>sats</InputGroup.Text>}
            />
            <div className='d-flex'>
              <SubmitButton variant='secondary' className='ms-auto mt-1 px-4'>buy</SubmitButton>
            </div>
          </Form>
        ))}
        className={classNames('mt-3 d-block', className)}
        variant='secondary'
      >buy credits
      </Button>
    </>
  )
}