import React from 'react';
import styled from 'styled-components';
import { useToasts } from 'react-toast-notifications';

const PluginCard = ({
  status,
  formPreview,
  getRedirectUrl,
  removeGoogleSheet,
  id,
  image,
  title,
  description,
}) => {
  const { addToast } = useToasts();

  const onDeleteGoogleSheetIntegration = async () => {
    const deleteData = await removeGoogleSheet(id);

    if (deleteData?.success) {
      addToast('Google-sheet has been uninstalled successfully', {
        appearance: 'success',
      });
      window.location.reload();
    }
  };

  return /*#__PURE__*/ React.createElement(
    Card,
    {
      status: status,
      className: 'wrapper-deco',
    },
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: 'flex-wrapper',
      },
      /*#__PURE__*/ React.createElement('img', {
        src: image,
        alt: title,
      }),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'content',
        },
        /*#__PURE__*/ React.createElement('h3', null, title),
        /*#__PURE__*/ React.createElement('p', null, description)
      )
    ),
    formPreview?.plugins?.isSheetsConfigured === false
      ? /*#__PURE__*/ React.createElement(
          'button',
          {
            type: 'button',
            onClick: () => getRedirectUrl(id),
          },
          'Install'
        )
      : /*#__PURE__*/ React.createElement(
          'div',
          {
            style: {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              width: '135%',
            },
          },
          /*#__PURE__*/ React.createElement(
            'button',
            {
              type: 'button',
            },
            'Installed'
          ),
          /*#__PURE__*/ React.createElement(
            'span',
            {
              style: {
                marginLeft: '2rem',
              },
            },
            /*#__PURE__*/ React.createElement(
              'div',
              {
                className: 'co-error',
                onClick: () => onDeleteGoogleSheetIntegration(),
              },
              /*#__PURE__*/ React.createElement(
                'svg',
                {
                  style: {
                    width: '25%',
                  },
                },
                /*#__PURE__*/ React.createElement('use', {
                  href: '/images/icons.svg#delete',
                })
              )
            )
          )
        )
  );
};

export default PluginCard;
const Card = styled.div`
  padding: 2rem;
  @media (min-width: 992px) {
    padding: 2.4rem;
  }
  button {
    width: 100%;
    padding: 1.3rem 2rem;
    letter-spacing: 0.2px;
    border-radius: 4px;
    background: ${props =>
      props.status === 'installed' ? '#E8EDFF' : 'var(--co-primary)'};
    color: ${props =>
      props.status === 'installed' ? 'var(--co-head)' : '#fff'};
  }
  .flex-wrapper {
    display: flex;
    padding-bottom: 2.4rem;
    img {
      flex: 1;
      height: 80px;
    }
    .content {
      margin-left: 2rem;
      flex: 4;
      flex-grow: 5;
    }
    h3 {
      font-size: 1.6rem;
    }
  }
`;
