import { useMutation, useQuery, gql } from "@apollo/client";
import React, { useState, useEffect } from 'react'
import { H4, Info3 } from 'src/components/typography'
import FormRenderer from 'src/pages/Services/FormRenderer'
import InverseLinkIcon from 'src/styling/icons/action/external link/white.svg?react'
import LinkIcon from 'src/styling/icons/action/external link/zodiac.svg?react'
import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'

import { ActionButton } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
import mailgunSchema from 'src/pages/Services/schemas/mailgun'
import classes from 'src/pages/Wizard/Radio.module.css'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'

const GET_CONFIG = gql`
  {
    config
    accounts
  }
`

const SAVE_CONFIG = gql`
  mutation Save($config: JSONObject) {
    saveConfig(config: $config)
  }
`
const SAVE_ACCOUNTS = gql`
  mutation Save($accounts: JSONObject) {
    saveAccounts(accounts: $accounts)
  }
`

const options = [
  {
    code: 'enabled',
    display: 'Yes, send notifications to my email'
  },
  {
    code: 'disabled',
    display: "No, don't send email notifications"
  }
]

const Mailgun = () => {
  const { data } = useQuery(GET_CONFIG)
  const [saveConfig] = useMutation(SAVE_CONFIG)
  const [saveAccounts] = useMutation(SAVE_ACCOUNTS)
  const [emailActive, setEmailActive] = useState(false)
  const accounts = data?.accounts ?? []

  const emailConfig =
    data?.config &&
    fromNamespace(namespaces.NOTIFICATIONS + '_email')(data.config)

  useEffect(() => {
    if (emailActive) return
    emailConfig && setEmailActive(emailConfig?.active ? 'enabled' : 'disabled')
  }, [emailActive, emailConfig])

  const handleRadio = enabled => {
    setEmailActive(enabled)
    save(enabled === 'enabled')
  }

  const save = active => {
    const config = toNamespace(`notifications_email`)({ active })
    return saveConfig({ variables: { config } })
  }

  const saveAccount = mailgun => {
    const accounts = { mailgun }
    return saveAccounts({ variables: { accounts } })
  }

  return (
    <div className={classes.mdForm}>
      <H4>Do you want to get notifications via email?</H4>
      <RadioGroup
        labelClassName={classes.mailgunRadioLabel}
        className={classes.mailgunRadioGroup}
        options={options}
        value={emailActive}
        onChange={event => handleRadio(event.target.value)}
      />

      <div className={classes.infoMessage}>
        <WarningIcon />
        <Info3>
          To get email notifications, you’ll need to set up Mailgun. Check out
          our article on how to set it up.
        </Info3>
      </div>
      <ActionButton
        className={classes.actionButton}
        color="primary"
        Icon={LinkIcon}
        InverseIcon={InverseLinkIcon}>
        <a
          className={classes.actionButtonLink}
          target="_blank"
          rel="noopener noreferrer"
          href="https://support.lamassu.is/hc/en-us/articles/115001203991-Email-notifications-with-Mailgun">
          Email notifications with Mailgun
        </a>
      </ActionButton>

      {emailActive === 'enabled' && (
        <>
          <H4>Mailgun credentials</H4>
          <FormRenderer
            value={accounts.mailgun}
            save={saveAccount}
            elements={mailgunSchema.elements}
            validationSchema={mailgunSchema.getValidationSchema(accounts.mailgun)}
            buttonLabel={'Save'}
          />
        </>
      )}
    </div>
  )
}

export default Mailgun