import React, { useEffect, useState } from 'react'

import Button from '../Buttons/Button'
import InputWithButton from '../Forms/InputWithButton'
import ButtonActionProvider from '../Actions/ButtonActionProvider'
import getElementorGlobalStyleTemplates from '../../api/getElementorGlobalStyleTemplates'
import saveElementorGlobalStyleTemplate from '../../api/saveElementorGlobalStyleTemplate'
import LoadingAnimation from '../Loading/LoadingAnimation'

import styles from './Elementor.module.scss'

const SaveElementorGlobalStylesButton = ({ text, disabled = false, onClick = null }) => {
  return (
    <Button
      type='ghost'
      label={text}
      icon='arrow'
      disabled={disabled}
      onClick={onClick}
    />
  )
}

const Elementor = () => {
  const { loading: availableGlobalTemplatesLoading, data: availableGlobalTemplates } = getElementorGlobalStyleTemplates()
  const [stateGlobalStyleTemplate, setStateGlobalStyleTemplate] = useState(null)
  const [globalStyleTemplateError, setGlobalStyleTemplateError] = useState(null)
  const [globalStyleTemplateSaved, setGlobalStyleTemplateSaved] = useState(false)

  useEffect(() => {
    // each time our local state changes we update our saved state to false.
    setGlobalStyleTemplateSaved(false)
    setGlobalStyleTemplateError(null)
  }, [stateGlobalStyleTemplate])

  useEffect(() => {
    if (availableGlobalTemplates) {
      const defaultTemplate = availableGlobalTemplates.find(template => template.default)
      if (defaultTemplate) {
        setStateGlobalStyleTemplate(defaultTemplate.id)
      }
    }
  }, [availableGlobalTemplates])

  return (
    <>
      <p className={styles.copy}>
        Some Template Kits include "Global Site Settings", if applied these can effect your entire website. Site Settings can be modified from the Elementor Hamburger Menu &raquo; Site Settings. You can change which global site settings are applied to your website below.
      </p>
      {availableGlobalTemplatesLoading || !availableGlobalTemplates.length ? (
        <LoadingAnimation />
      ) : (
        <InputWithButton
          Input={(
            <select
              onChange={e => {
                // Update local setting state value:
                setStateGlobalStyleTemplate(e.target.value)
              }}
              value={stateGlobalStyleTemplate}
              className={styles.select}
            >
              <option value=''>Reset to Default</option>
              {availableGlobalTemplates.map(template => (
                <option value={template.id} key={template.id}>{template.title}</option>
              ))}
            </select>
          )}
          Button={(
            <ButtonActionProvider
              DefaultButton={<SaveElementorGlobalStylesButton text='Update Global Template' />}
              LoadingButton={<SaveElementorGlobalStylesButton text='Saving' disabled />}
              ErrorButton={<SaveElementorGlobalStylesButton text='Error' disabled />}
              SuccessButton={<SaveElementorGlobalStylesButton text='Success!' disabled />}
              CompletedButton={<SaveElementorGlobalStylesButton text='Update Global Template' />}
              actionHook={() => saveElementorGlobalStyleTemplate({ globalStyleTemplateId: stateGlobalStyleTemplate })}
              isAlreadyCompleted={globalStyleTemplateSaved}
              completedCallback={(data) => {
                setGlobalStyleTemplateSaved(true)
              }}
              errorCallback={(data) => {
                setGlobalStyleTemplateError(data && data.error ? data.error : {
                  code: 'unknown_error',
                  message: 'Sorry something went wrong, please try again.'
                })
              }}
            />
          )}
          instructions={null}
          errorMessage={globalStyleTemplateError ? globalStyleTemplateError.message : null}
        />
      )}
    </>
  )
}

export default Elementor