import React, { useState } from 'react';
import { connect } from 'react-redux';
import styled from 'styled-components';
import { IconButton } from '../../../components/common/buttons/IconButton';
import { InsertImage } from '../../../components/common/inputs/UploadInput';
import { FormFieldWrapper } from '../../../containers/form-containers/FormBuilderLayouts';
import { setCoverImage } from '../../../redux/action-creators/form-actions/forms.actions';
import { getUploadUrl } from '../../../redux/action-creators/form-builder-actions/form-builder.actions';

function CoverImage({ coverImage, getUploadUrl, setCoverImage }) {
  const [uploading, setUploading] = useState(false);

  const onUploadFile = async file => {
    setUploading(true);
    const uploadData = await getUploadUrl(file);

    if (uploadData.data.success) {
      setCoverImage(uploadData.data?.data[0]);
    }

    setUploading(false);
  };

  return /*#__PURE__*/ React.createElement(
    FormFieldWrapper,
    {
      className: 'alt-alt',
    },
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: '',
      },
      coverImage && coverImage.length > 0
        ? /*#__PURE__*/ React.createElement(
            FormFieldSetting,
            {
              style: {
                background: `url(${coverImage}) no-repeat center`,
                backgroundSize: 'cover',
              },
            },
            /*#__PURE__*/ React.createElement(
              'span',
              {
                onClick: () => setCoverImage(''),
              },
              /*#__PURE__*/ React.createElement(IconButton, {
                svg: 'close',
                className: 'co-error delete-btn',
              })
            ),
            /*#__PURE__*/ React.createElement(InsertImage, {
              onchange: value => onUploadFile(value),
              title: uploading ? 'Uploading...' : 'Change cover image',
            })
          )
        : /*#__PURE__*/ React.createElement(
            FormFieldSetting,
            {
              style: {
                background: 'url(/images/auth-image.png) no-repeat center',
                backgroundSize: 'cover',
              },
            },
            /*#__PURE__*/ React.createElement(
              'span',
              {
                onClick: () => setCoverImage(''),
              },
              /*#__PURE__*/ React.createElement(IconButton, {
                svg: 'close',
                className: 'co-error delete-btn',
              })
            ),
            /*#__PURE__*/ React.createElement(InsertImage, {
              onchange: value => onUploadFile(value),
              title: uploading ? 'Uploading...' : 'Change cover image',
            })
          )
    )
  );
}

const mapStateToProps = state => ({
  coverImage: state.forms.coverImage,
});

export default connect(mapStateToProps, {
  getUploadUrl,
  setCoverImage,
})(CoverImage);
const FormFieldSetting = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 160px;
  border-radius: 4px;
  label {
    padding: 0 0.5rem;
    background: #ffffff;
    border-radius: 4px;
    font-family: var(--ff-medium);
    font-size: 1.6rem;
    cursor: pointer;
  }

  .delete-btn {
    position: absolute;
    right: 1rem;
    top: 1rem;
    background: #fff;
    border-radius: 50%;
    padding: 0 !important;
    svg {
      width: 25px;
      height: 25px;
    }
  }
`;
