"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImagePicker = void 0;
const react_1 = __importDefault(require("react"));
const styled_1 = __importDefault(require("@emotion/styled"));
const react_2 = require("react");
const ImageEditor_1 = require("./ImageEditor");
const Image_1 = require("./Image");
const Swatch = styled_1.default.button `
  width: 100%;
  padding: 5px;
  background: #fff;
  border: 1px solid grey;
  border-radius: 4px;
  display: block;
  cursor: pointer;
`;
const PopOver = styled_1.default.div `
  display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
  position: absolute;
  z-index: 2;
  width: 100%;
`;
const Cover = styled_1.default.div `
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
`;
const Dropdown = styled_1.default.div `
  padding: 5px;
  background: #fff;
  position: absolute;
  z-index: 2;
  width: 100%;
  min-width: 300px;
  max-width: 100vw;
  border: 1px solid grey;
  border-radius: 4px;
`;
const ImagePicker = ({ value, onChange, organizationId, }) => {
    const [isOpen, setOpen] = (0, react_2.useState)(false);
    const handleChange = (image) => {
        onChange(image);
        setOpen(false);
    };
    return (<>
      <Swatch onClick={(e) => {
            e.preventDefault();
            setOpen(!isOpen);
        }}>
        <Image_1.Image value={value}/>
      </Swatch>
      <PopOver isOpen={isOpen}>
        <Cover onClick={(e) => {
            e.preventDefault();
            setOpen(false);
        }}/>
        <Dropdown>
          <ImageEditor_1.ImageEditor onChange={handleChange} organizationId={organizationId}/>
        </Dropdown>
      </PopOver>
    </>);
};
exports.ImagePicker = ImagePicker;
//# sourceMappingURL=ImagePicker.jsx.map