import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { PrimaryIconButton } from '../../components/common/buttons/IconButton';
import {
  DeleteButton,
  NofillButton,
  PrimaryButton,
} from '../../components/common/buttons/PrimaryBtn';
import { ModalWrapper } from '../modals/ModalWrapper.modal';
import { useToasts } from 'react-toast-notifications';
import { TextInput } from '../../components/common/inputs/TextInput';
import { useCopyClipboard } from 'react-recipes';

const PluginApi = ({
  generateApiKey,
  getApiKeys,
  apiKey,
  deleteApiKey,
  resetApiKey,
}) => {
  const [generateAPI, setgenerateAPI] = useState(false);
  const [loading, setIsLoading] = useState(false);
  const [copyKey, setCopyKey] = useCopyClipboard(); // const [key, setKey] = useState(apiKey?.key)

  const onCopyKey = value => {
    setCopyKey(value);
    addToast('Api key copied', {
      appearance: 'info',
    });
    return copyKey;
  };

  const { addToast } = useToasts();
  const key = apiKey?.key;
  useEffect(() => {
    const fetchApiKey = async () => {
      const { data, success } = await getApiKeys();

      if (success) {
        return data;
      }
    };

    fetchApiKey();
  }, [getApiKeys]);

  const generateKey = async () => {
    setIsLoading(true);
    const { generate } = await generateApiKey();

    if (generate?.success) {
      getApiKeys();
      setIsLoading(false);
      addToast('API Key has been created successfully', {
        appearance: 'success',
      });
    } else {
      setIsLoading(false);
      addToast('Key already exist for this workspace', {
        appearance: 'error',
      });
      setgenerateAPI(false);
    }
  };

  const onDeleteApiKey = async () => {
    const deleteData = await deleteApiKey();

    if (deleteData?.success) {
      getApiKeys();
      addToast('ApiKey deleted successfully', {
        appearance: 'success',
      });
    } else {
      addToast('Could not delete', {
        appearance: 'error',
      });
    }
  };

  const onResetApiKey = async () => {
    setIsLoading(true);
    const reset = await resetApiKey();

    if (reset?.success) {
      getApiKeys();
      setIsLoading(false);
      addToast('Your API Key has been reset', {
        appearance: 'success',
      });
      setgenerateAPI(false);
    } else {
      setIsLoading(false);
      setgenerateAPI(false);
    }
  };

  return /*#__PURE__*/ React.createElement(
    Section,
    null,
    /*#__PURE__*/ React.createElement('h3', null, 'API Query'),
    /*#__PURE__*/ React.createElement(
      'p',
      null,
      'Reset or copy access token for a more dynamic access to your data.'
    ),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: 'pt-2',
      },
      /*#__PURE__*/ React.createElement(TextInput, {
        label: 'Private Key',
        readOnly: true,
        value: key,
        type: 'text',
        placeholder: 'djfh',
      }),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'flx-jsb-rm',
        },
        /*#__PURE__*/ React.createElement(
          'div',
          null,
          key
            ? /*#__PURE__*/ React.createElement(PrimaryButton, {
                text: 'Reset Api Keys',
                onclick: () => setgenerateAPI(true),
              })
            : /*#__PURE__*/ React.createElement(PrimaryButton, {
                text: 'Generate ApiKey',
                loading: loading,
                onclick: () => generateKey(),
              }),
          /*#__PURE__*/ React.createElement(
            ModalWrapper,
            {
              visible: generateAPI,
              setvisible: setgenerateAPI,
              title: 'Generating new API Keys',
              height: '390',
            },
            /*#__PURE__*/ React.createElement(
              'div',
              {
                className: 'modal-body',
              },
              /*#__PURE__*/ React.createElement(
                'p',
                {
                  className: 'error-info',
                },
                'Important notice'
              ),
              /*#__PURE__*/ React.createElement(
                'p',
                {
                  className: 'warning-text mb-2',
                },
                'If you\u2019ve integrated your present API Keys, you would be required to update the keys with the ones you are about to reset. Are you sure you want to continue?'
              )
            ),
            /*#__PURE__*/ React.createElement(
              'div',
              {
                className: 'd-flx-alc-jfe modal-action-wrap px-4',
              },
              /*#__PURE__*/ React.createElement(NofillButton, {
                title: 'Cancel',
                onclick: () => setgenerateAPI(false),
              }),
              /*#__PURE__*/ React.createElement(DeleteButton, {
                loading: loading,
                title: 'Continue',
                onclick: () => onResetApiKey(),
              })
            )
          )
        ),
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'd-flx-alc',
          },
          /*#__PURE__*/ React.createElement(PrimaryIconButton, {
            svg: 'copy-link-alt',
            onclick: () => onCopyKey(key),
            title: 'Copy Link',
            className: 'co-primary mr-2',
          }),
          /*#__PURE__*/ React.createElement(PrimaryIconButton, {
            svg: 'delete-alt',
            title: 'Delete',
            className: 'co-error',
            onclick: () => onDeleteApiKey(),
          })
        )
      )
    )
  );
};

export default PluginApi;
const Section = styled.section`
  .modal-body {
    padding-top: 0;
  }
  .error-info {
    display: inline-block;
    padding: 0.2rem 2rem;
    background: #ffe6ec;
    border-radius: 4px;
    color: var(--co-error);
    font-family: var(--ff-sbold);
    font-weight: 600;
    font-size: 1.6rem;
    margin-bottom: 2.2rem;
  }
  .warning-text {
    font-size: 1.6rem;
  }
  .modal-action-wrap {
    .btn:last-child {
      padding: 1.4rem 3.2rem;
    }
  }
`;
