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

const PluginCardTwo = ({
  status,
  image,
  title,
  formPreview,
  id,
  removePowerBi,
  getWorkspaceUrl,
  description,
}) => {
  const { addToast } = useToasts();

  const onDeletePowerBiIntegration = async () => {
    const deleteData = await removePowerBi(id);
    if (deleteData?.success) {
      addToast('PowerBi has been uninstalled successfully', {
        appearance: 'success',
      });
      window.location.reload();
    }
  };

  return (
    <Card status={status} className="wrapper-deco">
      <div className="flex-wrapper">
        <img src={image} alt={title} />
        <div className="content">
          <h3>{title}</h3>
          <p>{description}</p>
        </div>
      </div>

      {formPreview?.plugins?.isPowerbiConfigured === false ? (
        <button type="button" onClick={() => getWorkspaceUrl(id)}>
          Install
        </button>
      ) : (
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: '135%',
          }}
        >
          <button type="button">Installed</button>
          <span style={{ marginLeft: '2rem' }}>
            <div
              className="co-error"
              onClick={() => onDeletePowerBiIntegration()}
            >
              <svg style={{ width: '25%' }}>
                <use href="/images/icons.svg#delete"></use>
              </svg>
            </div>
          </span>
        </div>
      )}
    </Card>
  );
};

export default PluginCardTwo;

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;
    }
  }
`;
