import { ErrorMessage } from '@hookform/error-message'
import { Box, BoxProps, Checkbox, Text, Typography } from '@tidbcloud/uikit'
import Dompurify from 'dompurify'
import React from 'react'
import { useFormContext, Controller } from 'react-hook-form'

import Link from 'dbaas/components/Link'

export interface AcceptServicesProps extends BoxProps {
  label?: React.ReactNode
  onChange?: (value: boolean) => void
}

export const AcceptServices: React.FC<React.PropsWithChildren<AcceptServicesProps>> = ({
  label,
  onChange: handleChange,
  ...rest
}) => {
  const { control, formState, getFieldState } = useFormContext()
  const name = 'accept_service'
  const { error } = getFieldState(name, formState)

  return (
    <Box {...rest}>
      <Controller
        name="accept_service"
        control={control}
        rules={{
          validate: (value) => {
            if (!value) {
              return 'Please accept to get started.'
            }
            return true
          }
        }}
        render={({ field: { value, onChange } }) => {
          return (
            <Checkbox
              onChange={(event) => {
                onChange(event.currentTarget.checked)
                handleChange?.(event.currentTarget.checked)
              }}
              value={value}
              size="xs"
              error={error ? <ErrorMessage errors={formState.errors} name={name} /> : undefined}
              styles={(theme) => ({
                inner: {
                  marginTop: 2
                },
                error: {
                  fontSize: 12,
                  color: theme.colors.red[7]
                }
              })}
              label={
                label ? (
                  label
                ) : (
                  <Text fw={400} fz={12} lh="20px" color="carbon.8">
                    I agree to the{' '}
                    <Link
                      className="link"
                      href="https://www.pingcap.com/privacy-policy"
                      target="_blank"
                      rel="noopener noreferrer"
                      eventName="Privacy Policy Link Clicked"
                      eventParams={{ source: 'Sign Up' }}
                    >
                      Privacy Policy
                    </Link>{' '}
                    and{' '}
                    <Link
                      className="link"
                      href="https://www.pingcap.com/legal/tidb-cloud-services-agreement"
                      target="_blank"
                      rel="noopener noreferrer"
                      eventName="Services Agreement Link Clicked"
                      eventParams={{ source: 'Sign Up' }}
                    >
                      Services Agreement
                    </Link>
                    .
                  </Text>
                )
              }
            />
          )
        }}
      ></Controller>
    </Box>
  )
}

export interface MSPAgreementProps extends AcceptServicesProps {
  agreement?: string
}

export const MSPAgreement: React.FC<React.PropsWithChildren<MSPAgreementProps>> = ({ agreement, ...rest }) => {
  const label = agreement ? (
    <Typography variant="body-sm" dangerouslySetInnerHTML={{ __html: Dompurify.sanitize(agreement) }}></Typography>
  ) : undefined
  return <AcceptServices {...rest} label={label} />
}