function _extends() {
  _extends =
    Object.assign ||
    function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
      return target;
    };
  return _extends.apply(this, arguments);
}

import React from 'react';
import styled from 'styled-components';
export const InsertImage = ({ svg, title, color }) => {
  return /*#__PURE__*/ React.createElement(
    InsertImageLabel,
    {
      color: color,
    },
    /*#__PURE__*/ React.createElement('input', {
      type: 'file',
    }),
    /*#__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 }) => {
  return /*#__PURE__*/ React.createElement(
    InsertImageLabel,
    null,
    /*#__PURE__*/ React.createElement('input', {
      type: 'file',
    }),
    /*#__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 Upload = ({ title, color, onchange, ...props }) => {
  return /*#__PURE__*/ React.createElement(
    InsertImageLabel,
    {
      color: color,
      className: 'upload',
    },
    /*#__PURE__*/ React.createElement(
      'input',
      _extends(
        {
          onChange: onchange,
          type: 'file',
        },
        props
      )
    ),
    /*#__PURE__*/ React.createElement(
      'span',
      {
        className: 'content',
      },
      title
    )
  );
};
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;
    }
  }
  &.upload {
    border: 2px solid var(--co-primary);
    padding: 0.9rem 3rem;
    font-size: 1.4rem;
    color: var(--co-primary);
    border-radius: 4px;
    font-family: var(--ff-sbold);
    font-weight: 700;
    text-transform: capitalize;
    .content {
      padding: 0;
      color: var(--co-primary);
    }
  }
`;
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;
    }
  }
`;
