import './upload-modal.css';

import ModalOverlay from '../modal-overlay/modal-overlay';

type Props = {
  onClose: () => void;
  onSelectFile: (event: React.ChangeEvent<HTMLInputElement>) => void;
  onChooseCamera: () => void;
};

export default function UploadModal(props: Props) {
  return (
    <div className="upload-modal">
      <ModalOverlay onClick={props.onClose}/>

      <ul className="upload-modal__menu">
        <li>
          <div onClick={props.onChooseCamera}>
            Take Photo
            <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <linearGradient
                  id="gradient_svg"
                  x1="11.1879"
                  y1="1"
                  x2="11.1879"
                  y2="18"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stopColor="#FDDAA6"></stop>
                  <stop offset="1" stopColor="#DEB475"></stop>
                </linearGradient>
              </defs>
              <path
                d="M11.8799 15.6202C14.8844 15.6202 17.3199 13.1847 17.3199 10.1802C17.3199 7.17581 14.8844 4.74023 11.8799 4.74023C8.87551 4.74023 6.43994 7.17581 6.43994 10.1802C6.43994 13.1847 8.87551 15.6202 11.8799 15.6202Z"
                stroke="#121620"
                strokeMiterlimit="10"
              ></path>
              <path
                d="M8.47998 10.1793C8.47998 8.2753 9.97598 6.7793 11.88 6.7793"
                stroke="#121620"
                strokeMiterlimit="10"
                strokeLinecap="round"
              ></path>
              <path
                d="M18.068 4.604L15.416 1H8.344L5.692 4.604H1V18H22.76V4.604H18.068Z"
                stroke="#121620"
                strokeMiterlimit="10"
                strokeLinecap="round"
                strokeLinejoin="round"
              ></path>
              <path
                d="M4.33186 2.56445H2.35986"
                stroke="#121620"
                strokeMiterlimit="10"
                strokeLinecap="round"
                strokeLinejoin="round"
              ></path>
            </svg>
          </div>
        </li>

        <li>
          <input
            id="upload-input"
            type="file"
            accept="image/*"
            style={{ display: 'none' }}
            onChange={props.onSelectFile}
          />

          <label htmlFor="upload-input">
            Choose File
            <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <linearGradient
                  id="gradient_svg"
                  x1="11.1879"
                  y1="1"
                  x2="11.1879"
                  y2="18"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stopColor="#FDDAA6"></stop>
                  <stop offset="1" stopColor="#DEB475"></stop>
                </linearGradient>
              </defs>
              <path
                d="M2.81178 17.9977H22.5658V5.59397C22.5658 5.08863 22.1524 4.67517 21.6471 4.67517H5.10877C4.60343 4.67517 4.18997 5.08863 4.18997 5.59397V16.5276C4.18997 17.2626 3.6387 17.9517 2.90367 17.9977C2.12269 18.0436 1.43359 17.4005 1.43359 16.6195V1.91879C1.43359 1.41346 1.84705 1 2.35239 1H8.32455L9.70274 2.37819H20.2689V3.75638"
                stroke="#121620"
                strokeMiterlimit="10"
                strokeLinejoin="round"
              ></path>
            </svg>
          </label>
        </li>
      </ul>
    </div>
  );
}