import React from 'react';
import styled from 'styled-components';
export const InsertImage = ({ svg, title, color, onchange }) => {
  return /*#__PURE__*/ React.createElement(
    InsertImageLabel,
    {
      color: color,
    },
    /*#__PURE__*/ React.createElement('input', {
      onChange: onchange ? e => onchange(e.target.files[0]) : () => null,
      type: 'file',
      accept: 'image/*',
    }),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: 'content',
      },
      svg
        ? /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: `/images/icons.svg#${svg}`,
            })
          )
        : '',
      /*#__PURE__*/ React.createElement('span', null, title)
    )
  );
};
export const ImageUploadIcon = ({ className, onchange }) => {
  return /*#__PURE__*/ React.createElement(
    InsertImageLabel,
    null,
    /*#__PURE__*/ React.createElement('input', {
      onChange: onchange ? e => onchange(e.target.files[0]) : () => null,
      type: 'file',
      accept: 'image/*',
    }),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `content ${className}`,
      },
      /*#__PURE__*/ React.createElement(
        'svg',
        null,
        /*#__PURE__*/ React.createElement('use', {
          href: '/images/icons.svg#insert-image',
        })
      )
    )
  );
};
export const UploadAvatar = ({ className, name }) => {
  return /*#__PURE__*/ React.createElement(
    Avatar,
    {
      className: className,
    },
    /*#__PURE__*/ React.createElement('input', {
      type: 'file',
    }),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: 'content',
      },
      /*#__PURE__*/ React.createElement('span', null, name),
      /*#__PURE__*/ React.createElement(
        'svg',
        null,
        /*#__PURE__*/ React.createElement('use', {
          href: '/images/icons.svg#camera',
        })
      )
    )
  );
};
export const ElementUpload = ({ url, deleteImage }) => {
  return /*#__PURE__*/ React.createElement(
    Upload,
    {
      className: 'upload active',
      style: {
        background: `url(${url}) no-repeat center`,
        backgroundSize: '100%',
      },
    },
    /*#__PURE__*/ React.createElement(
      'svg',
      {
        onClick: () => deleteImage(),
        className: 'cancel-upload',
      },
      /*#__PURE__*/ React.createElement('use', {
        href: '/images/icons.svg#close',
      })
    )
  );
};
const InsertImageLabel = styled.label`
  position: relative;
  input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
  }
  .content {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 0.8rem 0;
    color: ${props => (props.color ? props.color : '#838CA2')};
    svg {
      width: 17px;
      height: 17px;
    }
    span {
      margin-left: 0.5rem;
      font-family: var(--ff-medium);
      font-weight: 500;
      font-size: 1.4rem;
    }
  }
`;
const Avatar = styled.label`
  position: relative;
  background: #c5c9da;
  border-radius: 50%;
  input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
  }
  .content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c5c9da;
    padding: 0.8rem 0;
    color: #838ca2;
    border-radius: 50%;
    width: 88px;
    height: 88px;
    svg {
      position: absolute;
      right: 0;
      bottom: 1rem;
      width: 23px;
      height: 23px;
      padding: 0.5rem;
      border-radius: 50%;
      background: #fff;
    }
    span {
      margin-left: 0.5rem;
      font-family: var(--ff-heading);
      font-weight: 700;
      font-size: 2.8rem;
      color: #838ca2;
      text-transform: Uppercase;
    }
  }
`;
const Upload = styled.div`
  position: relative;
  border-radius: 4px;
  margin-right: 1rem;
  margin-left: 1.4rem;
  .cancel-upload {
    position: absolute;
    width: 15px;
    height: 15px;
    right: -5px;
    top: -5px;
    color: #d50033;
    z-index: 1;
    cursor: pointer;
    background: #fff;
  }
  &.active {
    width: 38px;
    height: 32px;
    margin-right: 1rem;
  }
`;
