"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _IconMaterialDoneW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialDoneW100"));
var _IconMaterialCloseW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloseW100"));
var _IconMaterialTuneW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialTuneW100"));
var _IconMaterialCropW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCropW100"));
var _IconMaterialAspectRatioW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialAspectRatioW100"));
var _IconMaterialHighQualityW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialHighQualityW100"));
var _IconMaterialClearAllW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialClearAllW100"));
var _IconMaterialDownloadW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialDownloadW100"));
var _IconMaterialCloudW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloudW100"));
var _IconMaterialWaterDropW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialWaterDropW100"));
var _IconMaterialFlakyW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFlakyW100"));
var _IconMaterialWbSunnyW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialWbSunnyW100"));
var _IconMaterialTonalityW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialTonalityW100"));
var _IconMaterialNightlightW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialNightlightW100"));
var _Type = _interopRequireDefault(require("../Type"));
var _Surface = _interopRequireDefault(require("../Surface"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Expand = _interopRequireDefault(require("../Expand"));
var _Divider = _interopRequireDefault(require("../Divider"));
var _Slider = _interopRequireDefault(require("../Slider"));
var _NumericTextField = _interopRequireDefault(require("../NumericTextField"));
var _ImageCrop = _interopRequireDefault(require("../ImageCrop"));
var _Chip = _interopRequireDefault(require("../Chip"));
var _Line = _interopRequireDefault(require("../Line"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "tonal", "color", "image", "name", "type", "openDefault", "openedOptionDefault", "valueDefault", "value", "valueCopyDefault", "valueCopy", "onChange", "onChangeCopy", "onlyFilters", "filters", "meta", "filtersOption", "cropOption", "resizeOption", "qualityOption", "downloadOption", "resizeAspectRatio", "renderOption", "renderOptionClear", "renderSave", "renderCancel", "renderSlider", "renderDownload", "renderInput", "IconBrightness", "IconContrast", "IconSaturation", "IconFade", "IconInvert", "IconOldPhoto", "IconSave", "IconCancel", "IconClear", "IconCrop", "IconFilters", "IconResize", "IconQuality", "IconDownload", "ChipProps", "SliderProps", "TooltipProps", "ImageCropProps", "IconButtonProps", "className", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.style)(theme => ({
  root: {},
  option: {
    width: '100%',
    padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(3, 'px')}`
  },
  options: {
    width: '100%',
    overflowX: 'auto',
    padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(3, 'px')}`
  },
  canvas: {
    width: '100%',
    height: 'auto',
    zIndex: '1'
  },
  inputs: {
    width: '100%'
  },
  divider: {
    '&.onesy-Divider-root': {
      margin: '0px'
    }
  },
  imageWrapper: {
    position: 'relative',
    height: '400px',
    width: '100%',
    '&::before': {
      content: '""',
      position: 'absolute',
      inset: '0',
      width: '100%',
      height: '100%',
      background: 'currentColor',
      zIndex: '0',
      opacity: '0.94'
    }
  },
  canvasWrapper: {
    position: 'relative',
    lineHeight: '0'
  },
  image: {
    width: '100%',
    height: 'auto'
  },
  imageCopy: {
    width: '100%',
    height: 'auto'
  },
  imageCrop: {
    position: 'absolute',
    inset: '0',
    width: '100% !important',
    height: '100% !important'
  },
  meta: {
    width: '100%',
    padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(3, 'px')}`
  },
  optionInput: {
    '& .onesy-TextField-input-wrapper': {
      padding: '0px',
      height: 'auto'
    },
    '& .onesy-TextField-input': {
      textAlign: 'center'
    }
  },
  filters: {
    width: '100%',
    overflowX: 'auto',
    '& > *': {
      flex: '0 0 auto'
    }
  },
  action: {
    width: '100%',
    paddingTop: theme.methods.space.value(2, 'px')
  },
  slider: {
    width: '100%'
  }
}), {
  name: 'onesy-ImageEdit'
});
const ImageEdit = props_ => {
  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _theme$elements1, _ref, _ref2;
  const theme = (0, _styleReact.useOnesyTheme)();
  const l = theme.l;
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyImageEdit) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
  const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
  const Surface = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Surface) || _Surface.default;
  const IconButton = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
  const Tooltip = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Tooltip) || _Tooltip.default;
  const Expand = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Expand) || _Expand.default;
  const Divider = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Divider) || _Divider.default;
  const Slider = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Slider) || _Slider.default;
  const NumericTextField = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.NumericTextField) || _NumericTextField.default;
  const ImageCrop = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.ImageCrop) || _ImageCrop.default;
  const Chip = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Chip) || _Chip.default;
  const {
      ref,
      tonal = true,
      color = 'primary',
      image,
      name = 'onesy-image.jpg',
      type = 'image/jpeg',
      openDefault,
      openedOptionDefault,
      valueDefault,
      value: value_,
      valueCopyDefault,
      valueCopy: valueCopy_,
      onChange: onChange_,
      onChangeCopy: onChangeCopy_,
      onlyFilters,
      filters: filters_,
      meta = true,
      filtersOption = true,
      cropOption = true,
      resizeOption = true,
      qualityOption = true,
      downloadOption = true,
      resizeAspectRatio = true,
      renderOption,
      renderOptionClear,
      renderSave,
      renderCancel,
      renderSlider,
      renderDownload,
      renderInput,
      IconBrightness = _IconMaterialWbSunnyW.default,
      IconContrast = _IconMaterialFlakyW.default,
      IconSaturation = _IconMaterialWaterDropW.default,
      IconFade = _IconMaterialCloudW.default,
      IconInvert = _IconMaterialTonalityW.default,
      IconOldPhoto = _IconMaterialNightlightW.default,
      IconSave = _IconMaterialDoneW.default,
      IconCancel = _IconMaterialCloseW.default,
      IconClear = _IconMaterialClearAllW.default,
      IconCrop = _IconMaterialCropW.default,
      IconFilters = _IconMaterialTuneW.default,
      IconResize = _IconMaterialAspectRatioW.default,
      IconQuality = _IconMaterialHighQualityW.default,
      IconDownload = _IconMaterialDownloadW.default,
      ChipProps: ChipProps_,
      SliderProps: SliderProps_,
      TooltipProps: TooltipProps_,
      ImageCropProps: ImageCropProps_,
      IconButtonProps: IconButtonProps_,
      className,
      children
    } = props,
    other = (0, _objectWithoutProperties2.default)(props, _excluded);
  const [init, setInit] = _react.default.useState(false);
  const [value, setValue] = _react.default.useState(valueDefault !== undefined ? valueDefault : value_);
  const [valueCopy, setValueCopy] = _react.default.useState(valueCopyDefault !== undefined ? valueCopyDefault : valueCopy_);
  const [open, setOpen] = _react.default.useState(openDefault);
  const [openedOption, setOpenedOption] = _react.default.useState(openedOptionDefault);
  const [quality, setQuality] = _react.default.useState(100);
  const [filterValues, setFilterValues] = _react.default.useState({});
  const [filterValuesCopy, setFilterValuesCopy] = _react.default.useState({});
  const [filter, setFilter] = _react.default.useState();
  const [resize, setResize] = _react.default.useState();
  const [selection, setSelection] = _react.default.useState();
  const [aspectRatio, setAspectRatio] = _react.default.useState();
  const [aspectRatioCustom, setAspectRatioCustom] = _react.default.useState([1, 1]);
  const [size, setSize] = _react.default.useState('');
  const {
    classes
  } = useStyle();
  const refs = {
    root: _react.default.useRef(null),
    option: _react.default.useRef(null),
    value: _react.default.useRef(null),
    valueCopy: _react.default.useRef(null),
    canvasMain: _react.default.useRef(null),
    open: _react.default.useRef(null),
    resizeAspectRatio: _react.default.useRef(null),
    filterValues: _react.default.useRef(null),
    filterValuesCopy: _react.default.useRef(null)
  };
  refs.value.current = value;
  refs.valueCopy.current = valueCopy;
  refs.open.current = open;
  refs.resizeAspectRatio.current = resizeAspectRatio;
  refs.filterValues.current = filterValues;
  refs.filterValuesCopy.current = filterValuesCopy;
  const updateSize = (valueNew = refs.canvasMain.current) => {
    const uri = valueNew.toDataURL(type);

    // Update size
    setSize((0, _utils.to)((0, _utils.to)(uri, 'byte-size'), 'size-format'));
  };
  _react.default.useEffect(() => {
    var _refs$root$current;
    const method = event => {
      if (['Escape'].includes(event.key) || ['s', 'S'].includes(event.key) && event.metaKey || ['f', 'F'].includes(event.key) && event.metaKey && event.shiftKey || ['c', 'C'].includes(event.key) && event.metaKey && event.shiftKey || ['d', 'D'].includes(event.key) && (event.metaKey || event.shiftKey) || ['r', 'R'].includes(event.key) && (event.metaKey || event.shiftKey) || ['q', 'Q'].includes(event.key) && event.metaKey && event.shiftKey) {
        event.preventDefault();
      }
      switch (event.key) {
        case 's':
        case 'S':
          if (refs.open.current && event.metaKey) onSave();
          return;
        case 'f':
        case 'F':
          if (event.metaKey && event.shiftKey) openOption('filters');
          return;
        case 'c':
        case 'C':
          if (event.metaKey && event.shiftKey) openOption('crop');
          return;
        case 'd':
        case 'D':
          if (event.metaKey && event.shiftKey) onDownload();
          return;
        case 'r':
        case 'R':
          if (event.metaKey && !event.shiftKey) onReset();
          if (event.metaKey && event.shiftKey) openOption('resize');
          return;
        case 'q':
        case 'Q':
          if (event.metaKey && event.shiftKey) openOption('quality');
          return;
        case 'Escape':
          if (refs.open.current) onCancel();
          return;
        default:
          break;
      }
    };
    if (!refs.value.current) {
      if (image instanceof HTMLCanvasElement) onChange(image);else if ((0, _utils.is)('string', image)) makeImage(image);
    }
    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
    rootDocument.addEventListener('keydown', method);
    setInit(true);
    return () => {
      // Clean up
      rootDocument.removeEventListener('keydown', method);
    };
  }, []);
  _react.default.useEffect(() => {
    if (image instanceof HTMLCanvasElement) onChange(image);else if ((0, _utils.is)('string', image)) makeImage(image);
  }, [image]);
  _react.default.useEffect(() => {
    const valueToUse = !open ? refs.value.current : refs.valueCopy.current;
    if (valueToUse) {
      var _refs$canvasMain$curr;
      refs.canvasMain.current.width = valueToUse.width;
      refs.canvasMain.current.height = valueToUse.height;
      (_refs$canvasMain$curr = refs.canvasMain.current) === null || _refs$canvasMain$curr === void 0 || _refs$canvasMain$curr.getContext('2d').drawImage(valueToUse, 0, 0, valueToUse.width, valueToUse.height);
      updateSize();
    }
  }, [value, valueCopy, open]);
  _react.default.useEffect(() => {
    if (init) {
      if (value_ !== value) onChange(value_);
    }
  }, [value_]);
  _react.default.useEffect(() => {
    if (init) {
      if (valueCopy_ !== valueCopy) onChangeCopy(valueCopy_);
    }
  }, [valueCopy_]);
  const applyAllFilters = canvas => {
    let valueCopy__ = refs.valueCopy.current;

    // Update filters
    Object.keys(refs.filterValuesCopy.current).forEach(item => {
      const filterValue_ = filters.find(item_ => item_.value === item);
      if (filterValue_) {
        const {
          method: method_0
        } = filterValue_;
        if ((0, _utils.is)('function', method_0) && refs.filterValuesCopy.current[item] !== undefined) valueCopy__ = method_0(refs.filterValuesCopy.current[item], canvas, valueCopy__);
      }
    });
  };
  const applyAllFiltersDebounced = (0, _utils.debounce)(applyAllFilters, 140);
  _react.default.useEffect(() => {
    applyAllFiltersDebounced(refs.canvasMain.current);
  }, [filterValuesCopy]);
  const makeImage = async (valueNew_0 = refs.value.current) => {
    var _refs$root$current2;
    const img = await (0, _utils2.image)(valueNew_0);
    const rootDocument_0 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
    const canvas_0 = rootDocument_0.createElement('canvas');
    canvas_0.width = img.width;
    canvas_0.height = img.height;
    canvas_0.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

    // Image
    onChange(canvas_0);

    // Image copy
    const copy = rootDocument_0.createElement('canvas');
    copy.width = canvas_0.width;
    copy.height = canvas_0.height;
    copy.getContext('2d').drawImage(canvas_0, 0, 0, canvas_0.width, canvas_0.height);
    onChangeCopy(copy);
  };
  const updateResize = (0, _utils.debounce)(async (width, height) => {
    var _refs$root$current3;
    const rootDocument_1 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current3 = refs.root.current) === null || _refs$root$current3 === void 0 ? void 0 : _refs$root$current3.ownerDocument) || window.document : undefined;

    // Update value copy
    const canvas_1 = rootDocument_1.createElement('canvas');
    if (width > 1 && height > 1) {
      canvas_1.width = width;
      canvas_1.height = height;
      canvas_1.getContext('2d').drawImage(refs.value.current, 0, 0, width, height);

      // Value copy
      onChangeCopy(canvas_1);

      // Update the canvas value
      refs.canvasMain.current.width = width;
      refs.canvasMain.current.height = height;
      refs.canvasMain.current.getContext('2d').drawImage(value, 0, 0, width, height);

      // Update size
      updateSize();
    }
  }, 140);
  const onFilterSliderChange = (valueNew_1, valueFilter) => {
    setFilterValuesCopy(values_ => _objectSpread(_objectSpread({}, values_), {}, {
      [valueFilter]: valueNew_1
    }));
  };
  const onChangeFilter = valueNew_2 => {
    // If moving to another filter or closing current one
    // clean up previous one filter for mainCanvas
    if (filter === valueNew_2) setFilter('');else setFilter(valueNew_2);
  };
  const onChangeAspectRatioCustom = (valueNew_, left_ = true) => {
    const valueNew_3 = !valueNew_ ? 1 : valueNew_;
    let left = (aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[0]) || 1;
    let right = (aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[1]) || 1;
    left_ ? left = valueNew_3 : right = valueNew_3;
    setAspectRatioCustom([left, right]);
    onChangeAspectRatio(left / right);
  };
  const onChangeAspectRatio = valueNew_4 => {
    if (aspectRatio === valueNew_4) setAspectRatio('');else setAspectRatio(valueNew_4);
  };
  const onChangeResize = async (valueNew_5, width_ = true) => {
    let width_0;
    let height_0;
    if (!refs.resizeAspectRatio.current) {
      if (width_) {
        width_0 = +valueNew_5;
        height_0 = resize === null || resize === void 0 ? void 0 : resize[1];
      } else {
        width_0 = resize === null || resize === void 0 ? void 0 : resize[0];
        height_0 = +valueNew_5;
      }
    } else {
      const aspectRatio_ = (value === null || value === void 0 ? void 0 : value.width) / (value === null || value === void 0 ? void 0 : value.height);
      if (width_) {
        width_0 = +valueNew_5;
        height_0 = valueNew_5 / aspectRatio_;
      } else {
        height_0 = +valueNew_5;
        width_0 = height_0 * aspectRatio_;
      }
    }
    width_0 = (0, _utils.clamp)(width_0, 0);
    height_0 = (0, _utils.clamp)(height_0, 0);
    setResize([width_0, height_0]);
    await updateResize(width_0, height_0);
  };
  const updateQuality = (0, _utils.debounce)(async valueNew_6 => {
    var _refs$root$current4, _refs$canvasMain$curr2;
    const rootDocument_2 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current4 = refs.root.current) === null || _refs$root$current4 === void 0 ? void 0 : _refs$root$current4.ownerDocument) || window.document : undefined;

    // Update copy value
    const uri_0 = value.toDataURL('image/jpeg', valueNew_6 / 100);
    const img_0 = await (0, _utils2.image)(uri_0);
    const canvas_2 = rootDocument_2.createElement('canvas');
    canvas_2.width = img_0.width;
    canvas_2.height = img_0.height;
    canvas_2.getContext('2d').drawImage(img_0, 0, 0, img_0.width, img_0.height);
    onChangeCopy(canvas_2);

    // Update the canvas value
    refs.canvasMain.current.width = canvas_2.width;
    refs.canvasMain.current.height = canvas_2.height;
    (_refs$canvasMain$curr2 = refs.canvasMain.current) === null || _refs$canvasMain$curr2 === void 0 || _refs$canvasMain$curr2.getContext('2d').drawImage(canvas_2, 0, 0, canvas_2.width, canvas_2.height);

    // Update size
    updateSize();
  }, 40);
  const onChangeQuality = async valueNew_7 => {
    setQuality(valueNew_7);
    await updateQuality(valueNew_7);
  };
  const onChange = valueNew_8 => {
    // Update inner or controlled
    if (!props.hasOwnProperty('value')) setValue(valueNew_8);
    if ((0, _utils.is)('function', onChange_)) onChange_(valueNew_8);
  };
  const onChangeCopy = valueNew_9 => {
    // Update inner or controlled
    if (!props.hasOwnProperty('valueCopy')) setValueCopy(valueNew_9);
    if ((0, _utils.is)('function', onChangeCopy_)) onChangeCopy_(valueNew_9);
  };
  const onReset = (imageReset = true, valueCopyReset = true, resizeReset = true) => {
    var _refs$root$current5;
    const rootDocument_3 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current5 = refs.root.current) === null || _refs$root$current5 === void 0 ? void 0 : _refs$root$current5.ownerDocument) || window.document : undefined;
    setOpen(false);
    setQuality(100);
    setAspectRatio('');
    setAspectRatioCustom([1, 1]);
    setSelection('');
    setFilter('');
    setFilterValuesCopy(_objectSpread({}, filterValues));
    if (resizeReset) setResize([value === null || value === void 0 ? void 0 : value.width, value === null || value === void 0 ? void 0 : value.height]);
    if (valueCopyReset) {
      const canvas_3 = rootDocument_3.createElement('canvas');
      canvas_3.width = refs.value.current.width;
      canvas_3.height = refs.value.current.height;
      canvas_3.getContext('2d').drawImage(refs.value.current, 0, 0, refs.value.current.width, refs.value.current.height);
      onChangeCopy(canvas_3);
    }
    if (imageReset) {
      setFilterValues({});
      setFilterValuesCopy({});
      makeImage(image);
    }
  };
  const openOption = valueNew_10 => {
    setOpenedOption(valueNew_10);
    if (open && openedOption === valueNew_10) {
      setOpen(false);
      onReset(false);
    } else if (!open) setOpen(true);
  };
  const onSave = () => {
    var _refs$root$current6, _refs$canvasMain$curr3;
    const rootDocument_4 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current6 = refs.root.current) === null || _refs$root$current6 === void 0 ? void 0 : _refs$root$current6.ownerDocument) || window.document : undefined;

    // Make value copy into value
    let canvas_4 = rootDocument_4.createElement('canvas');
    canvas_4.width = refs.valueCopy.current.width;
    canvas_4.height = refs.valueCopy.current.height;
    canvas_4.getContext('2d').drawImage(refs.valueCopy.current, 0, 0, refs.valueCopy.current.width, refs.valueCopy.current.height);

    // Update crop
    if (openedOption === 'crop' && selection) {
      // Crop the canvas
      canvas_4.width = selection.width;
      canvas_4.height = selection.height;
      canvas_4 = (0, _utils.canvasCrop)(refs.valueCopy.current, selection.left, selection.top, selection.width, selection.height);
    }

    // Update filters
    setFilterValues(_objectSpread({}, filterValuesCopy));
    applyAllFilters(canvas_4);

    // Update the main canvas value
    refs.canvasMain.current.width = canvas_4.width;
    refs.canvasMain.current.height = canvas_4.height;
    (_refs$canvasMain$curr3 = refs.canvasMain.current) === null || _refs$canvasMain$curr3 === void 0 || _refs$canvasMain$curr3.getContext('2d').drawImage(canvas_4, 0, 0, canvas_4.width, canvas_4.height);

    // Update value
    onChange(canvas_4);
    const canvasCopy = rootDocument_4.createElement('canvas');
    canvasCopy.width = canvas_4.width;
    canvasCopy.height = canvas_4.height;
    canvasCopy.getContext('2d').drawImage(canvas_4, 0, 0, canvasCopy.width, canvasCopy.height);

    // Update value copy
    onChangeCopy(canvasCopy);

    // Reset
    onReset(false, false, false);
  };
  const onDownload = () => {
    // Download the image from canvas datauri
    // of the image type and quality, name
    const uri_1 = refs.value.current.toDataURL(type);
    (0, _utils.download)(name, uri_1, type);
  };
  const onCancel = () => {
    var _refs$root$current7, _refs$value$current, _refs$value$current2, _refs$canvasMain$curr4;
    const rootDocument_5 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current7 = refs.root.current) === null || _refs$root$current7 === void 0 ? void 0 : _refs$root$current7.ownerDocument) || window.document : undefined;

    // Reset to unopen
    onReset(false);

    // Make value copy into value
    const canvas_5 = rootDocument_5.createElement('canvas');
    canvas_5.width = refs.value.current.width;
    canvas_5.height = refs.value.current.height;
    canvas_5.getContext('2d').drawImage(refs.value.current, 0, 0, refs.value.current.width, refs.value.current.height);
    onChangeCopy(canvas_5);

    // Update the main canvas value
    refs.canvasMain.current.width = (_refs$value$current = refs.value.current) === null || _refs$value$current === void 0 ? void 0 : _refs$value$current.width;
    refs.canvasMain.current.height = (_refs$value$current2 = refs.value.current) === null || _refs$value$current2 === void 0 ? void 0 : _refs$value$current2.height;
    (_refs$canvasMain$curr4 = refs.canvasMain.current) === null || _refs$canvasMain$curr4 === void 0 || _refs$canvasMain$curr4.getContext('2d').drawImage(refs.value.current, 0, 0, refs.value.current.width, refs.value.current.height);
  };
  let filters = _react.default.useMemo(() => [{
    label: l('Brightness'),
    Icon: IconBrightness,
    value: 'brightness',
    method: _utils2.canvasBrightness,
    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
      name: l('Brightness')
    }, TooltipProps), {}, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
        version: "outlined",
        selected: selected_,
        onClick: () => onChangeFilter_(value__)
      }, IconButtonProps), {}, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBrightness, {})
      }))
    }), value__),
    renderSlider: (value___0, filterValuesCopy_, onFilterSliderChange_) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
      valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value___0]) || 0,
      value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value___0]) || 0,
      min: -100,
      max: 100,
      precision: 1,
      marks: [{
        value: -100,
        label: '-100'
      }, {
        value: 0,
        label: '0'
      }, {
        value: 100,
        label: '100'
      }],
      labels: true,
      tooltip: true,
      onChange: valueNew_11 => {
        if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew_11, value___0);
      }
    }, SliderProps), {}, {
      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
    }), value___0)
  }, {
    label: l('Contrast'),
    Icon: IconContrast,
    value: 'contrast',
    method: _utils2.canvasContrast,
    renderIconButton: (value___1, selected__0, onChangeFilter__0) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
      name: l('Contrast')
    }, TooltipProps), {}, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
        version: "outlined",
        selected: selected__0,
        onClick: () => onChangeFilter__0(value___1)
      }, IconButtonProps), {}, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContrast, {})
      }))
    }), value___1),
    renderSlider: (value___2, filterValuesCopy__0, onFilterSliderChange__0) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
      valueDefault: (filterValuesCopy__0 === null || filterValuesCopy__0 === void 0 ? void 0 : filterValuesCopy__0[value___2]) || 0,
      value: (filterValuesCopy__0 === null || filterValuesCopy__0 === void 0 ? void 0 : filterValuesCopy__0[value___2]) || 0,
      min: -100,
      max: 100,
      precision: 1,
      marks: [{
        value: -100,
        label: '-100'
      }, {
        value: 0,
        label: '0'
      }, {
        value: 100,
        label: '100'
      }],
      labels: true,
      tooltip: true,
      onChange: valueNew_12 => {
        if ((0, _utils.is)('function', onFilterSliderChange__0)) onFilterSliderChange__0(valueNew_12, value___2);
      }
    }, SliderProps), {}, {
      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
    }), value___2)
  }, {
    label: l('Saturation'),
    Icon: IconSaturation,
    value: 'saturation',
    method: _utils2.canvasSaturation,
    renderIconButton: (value___3, selected__1, onChangeFilter__1) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
      name: l('Saturation')
    }, TooltipProps), {}, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
        version: "outlined",
        selected: selected__1,
        onClick: () => onChangeFilter__1(value___3)
      }, IconButtonProps), {}, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconSaturation, {})
      }))
    }), value___3),
    renderSlider: (value___4, filterValuesCopy__1, onFilterSliderChange__1) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
      valueDefault: (filterValuesCopy__1 === null || filterValuesCopy__1 === void 0 ? void 0 : filterValuesCopy__1[value___4]) || 0,
      value: (filterValuesCopy__1 === null || filterValuesCopy__1 === void 0 ? void 0 : filterValuesCopy__1[value___4]) || 0,
      min: -100,
      max: 100,
      precision: 1,
      marks: [{
        value: -100,
        label: '-100'
      }, {
        value: 0,
        label: '0'
      }, {
        value: 100,
        label: '100'
      }],
      labels: true,
      tooltip: true,
      onChange: valueNew_13 => {
        if ((0, _utils.is)('function', onFilterSliderChange__1)) onFilterSliderChange__1(valueNew_13, value___4);
      }
    }, SliderProps), {}, {
      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
    }), value___4)
  }, {
    label: l('Fade'),
    Icon: IconFade,
    value: 'fade',
    method: _utils2.canvasFade,
    renderIconButton: (value___5, selected__2, onChangeFilter__2) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
      name: l('Fade')
    }, TooltipProps), {}, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
        version: "outlined",
        selected: selected__2,
        onClick: () => onChangeFilter__2(value___5)
      }, IconButtonProps), {}, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconFade, {})
      }))
    }), value___5),
    renderSlider: (value___6, filterValuesCopy__2, onFilterSliderChange__2) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
      valueDefault: (filterValuesCopy__2 === null || filterValuesCopy__2 === void 0 ? void 0 : filterValuesCopy__2[value___6]) || 0,
      value: (filterValuesCopy__2 === null || filterValuesCopy__2 === void 0 ? void 0 : filterValuesCopy__2[value___6]) || 0,
      min: 0,
      max: 100,
      precision: 1,
      marks: [{
        value: 0,
        label: '0'
      }, {
        value: 100,
        label: '100'
      }],
      labels: true,
      tooltip: true,
      onChange: valueNew_14 => {
        if ((0, _utils.is)('function', onFilterSliderChange__2)) onFilterSliderChange__2(valueNew_14, value___6);
      }
    }, SliderProps), {}, {
      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
    }), value___6)
  }, {
    label: l('Invert'),
    Icon: IconInvert,
    value: 'invert',
    method: _utils2.canvasInvert,
    renderIconButton: (value___7, selected__3, onChangeFilter__3) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
      name: l('Invert')
    }, TooltipProps), {}, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
        version: "outlined",
        selected: selected__3,
        onClick: () => onChangeFilter__3(value___7)
      }, IconButtonProps), {}, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconInvert, {})
      }))
    }), value___7),
    renderSlider: (value___8, filterValuesCopy__3, onFilterSliderChange__3) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
      valueDefault: (filterValuesCopy__3 === null || filterValuesCopy__3 === void 0 ? void 0 : filterValuesCopy__3[value___8]) || 0,
      value: (filterValuesCopy__3 === null || filterValuesCopy__3 === void 0 ? void 0 : filterValuesCopy__3[value___8]) || 0,
      min: 0,
      max: 1,
      precision: 1,
      marks: [{
        value: 0,
        label: 'Not inverted'
      }, {
        value: 1,
        label: 'Inverted'
      }],
      labels: true,
      tooltip: true,
      onChange: valueNew_15 => {
        if ((0, _utils.is)('function', onFilterSliderChange__3)) onFilterSliderChange__3(valueNew_15, value___8);
      }
    }, SliderProps), {}, {
      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
    }), value___8)
  }, {
    label: l('Old photo'),
    Icon: IconOldPhoto,
    value: 'old_photo',
    method: _utils2.canvasOldPhoto,
    renderIconButton: (value___9, selected__4, onChangeFilter__4) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
      name: l('Old photo')
    }, TooltipProps), {}, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
        version: "outlined",
        selected: selected__4,
        onClick: () => onChangeFilter__4(value___9)
      }, IconButtonProps), {}, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconOldPhoto, {})
      }))
    }), value___9),
    renderSlider: (value___10, filterValuesCopy__4, onFilterSliderChange__4) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
      valueDefault: (filterValuesCopy__4 === null || filterValuesCopy__4 === void 0 ? void 0 : filterValuesCopy__4[value___10]) || 0,
      value: (filterValuesCopy__4 === null || filterValuesCopy__4 === void 0 ? void 0 : filterValuesCopy__4[value___10]) || 0,
      min: -40,
      max: 40,
      precision: 1,
      marks: [{
        value: -40,
        label: '-40'
      }, {
        value: 0,
        label: 'No filter'
      }, {
        value: 40,
        label: '40'
      }],
      labels: true,
      tooltip: true,
      onChange: valueNew_16 => {
        if ((0, _utils.is)('function', onFilterSliderChange__4)) onFilterSliderChange__4(valueNew_16, value___10);
      }
    }, SliderProps), {}, {
      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
    }), value___10)
  }, ...(filters_ || [])], [filters_]);

  // Only filters
  if ((0, _utils.is)('array', onlyFilters)) filters = filters.filter(item_0 => onlyFilters.includes(item_0.value));
  const ImageCropProps = _objectSpread({
    gridLines: true
  }, ImageCropProps_);
  const TooltipProps = _objectSpread({
    position: 'bottom',
    interactive: false
  }, TooltipProps_);
  const IconButtonProps = _objectSpread({
    tonal,
    color: 'inherit'
  }, IconButtonProps_);
  const SliderProps = _objectSpread({
    tonal: false,
    color: 'default'
  }, SliderProps_);
  const ChipProps = _objectSpread({
    size: 'small'
  }, ChipProps_);
  const chips = [{
    label: '1:1',
    value: 1 / 1
  }, {
    label: '4:3',
    value: 4 / 3
  }, {
    label: '16:9',
    value: 16 / 9
  }];
  const options = [filtersOption && {
    label: l('Filters'),
    value: 'filters',
    Icon: IconFilters
  }, cropOption && {
    label: l('Crop'),
    value: 'crop',
    Icon: IconCrop
  }, resizeOption && {
    label: l('Resize'),
    value: 'resize',
    Icon: IconResize
  }, qualityOption && {
    label: l('Quality'),
    value: 'quality',
    Icon: IconQuality
  }].filter(Boolean);
  const MetaTypeProps = {
    version: 'b3'
  };
  const filterValue = filters.find(item__0 => item__0.value === filter);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
    ref: item_1 => {
      if (ref) {
        if ((0, _utils.is)('function', ref)) ref(item_1);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item_1;
      }
      refs.root.current = item_1;
    },
    tonal: tonal,
    color: color,
    gap: 0,
    direction: "column",
    Component: Surface,
    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-root', `onesy-ImageEdit-size-${size}`], className, classes.root])
  }, other), {}, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
      gap: 0,
      direction: "column",
      align: "center",
      justify: "center",
      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-image-wrapper'], classes.imageWrapper]),
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-canvas-wrapper'], classes.canvasWrapper]),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("canvas", {
          ref: refs.canvasMain,
          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-canvas', 'onesy-ImageEdit-canvas-main'], classes.canvas, classes.canvas_main])
        }), open && openedOption === 'crop' && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageCrop, _objectSpread(_objectSpread({
          image: valueCopy,
          aspectRatio: aspectRatio ? aspectRatio : undefined,
          onSelectorChange: selector => setSelection(selector)
        }, ImageCropProps), {}, {
          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-image-crop'], ImageCropProps.className, classes.imageCrop]),
          style: {
            width: valueCopy === null || valueCopy === void 0 ? void 0 : valueCopy.width,
            height: valueCopy === null || valueCopy === void 0 ? void 0 : valueCopy.height
          }
        }))]
      })
    }), (filtersOption || cropOption || resizeOption || qualityOption) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Expand, {
        in: !!open,
        parent: refs.root.current,
        style: {
          width: '100%'
        },
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
          gap: 0,
          ref: refs.option,
          direction: "column",
          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option'], classes.option]),
          children: [openedOption === 'filters' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Expand, {
              in: !!filterValue,
              parent: refs.option.current,
              style: {
                width: '100%'
              },
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                style: {
                  paddingInline: theme.methods.space.value(5, 'px'),
                  paddingBottom: theme.methods.space.value(5, 'px')
                },
                children: (0, _utils.is)('function', filterValue === null || filterValue === void 0 ? void 0 : filterValue.renderSlider) && (filterValue === null || filterValue === void 0 ? void 0 : filterValue.renderSlider(filterValue.value, refs.filterValuesCopy.current, onFilterSliderChange))
              })
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
              gap: 1,
              direction: "row",
              align: "center",
              justify: "flex-start",
              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-filters'], classes.filters]),
              children: filters.map(item_2 => (0, _utils.is)('function', item_2.renderIconButton) && item_2.renderIconButton(item_2.value, item_2.value === filter, onChangeFilter))
            })]
          }), openedOption === 'crop' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
            gap: 1,
            direction: "row",
            align: "center",
            justify: "center",
            style: {
              width: '100%'
            },
            children: [chips.map((item_3, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, _objectSpread(_objectSpread({
              selected: aspectRatio === item_3.value,
              onClick: () => onChangeAspectRatio(item_3.value)
            }, ChipProps), {}, {
              children: item_3.label
            }), index)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
              gap: 0,
              direction: "row",
              align: "center",
              justify: "center",
              children: [(0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, aspectRatioCustom, onChangeAspectRatioCustom, 'left') : /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
                tonal: tonal,
                color: "default",
                version: "text",
                size: "small",
                min: 1,
                value: aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[0],
                onChange: valueNew_17 => onChangeAspectRatioCustom(+valueNew_17),
                increment: false,
                decrement: false,
                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
                style: {
                  width: 24
                }
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
                children: ":"
              }), (0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, aspectRatioCustom, onChangeAspectRatioCustom, 'right') : /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
                tonal: tonal,
                color: "default",
                version: "text",
                size: "small",
                min: 1,
                value: aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[1],
                onChange: valueNew_18 => onChangeAspectRatioCustom(+valueNew_18, false),
                increment: false,
                decrement: false,
                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
                style: {
                  width: 24
                }
              })]
            })]
          }), openedOption === 'resize' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
            direction: "row",
            align: "center",
            justify: "center",
            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-inputs'], classes.inputs]),
            children: [(0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'width') : /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
              tonal: tonal,
              name: l('Width'),
              color: "default",
              version: "text",
              size: "small",
              min: 1,
              max: value === null || value === void 0 ? void 0 : value.width,
              valueDefault: value === null || value === void 0 ? void 0 : value.width,
              value: resize === null || resize === void 0 ? void 0 : resize[0],
              onChange: valueNew_19 => onChangeResize(valueNew_19)
            }), (0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'height') : /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
              tonal: tonal,
              name: l('Height'),
              color: "default",
              version: "text",
              size: "small",
              min: 1,
              max: value === null || value === void 0 ? void 0 : value.height,
              valueDefault: value === null || value === void 0 ? void 0 : value.height,
              value: resize === null || resize === void 0 ? void 0 : resize[1],
              onChange: valueNew_20 => onChangeResize(valueNew_20, false)
            })]
          }), openedOption === 'quality' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
            gap: 3,
            direction: "row",
            align: "center",
            style: {
              width: '100%'
            },
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
              valueDefault: quality,
              value: quality,
              min: 1,
              max: 100,
              precision: 1,
              marks: [{
                value: 1
              }, {
                value: 50
              }, {
                value: 100
              }],
              tooltip: true,
              onChange: onChangeQuality
            }, SliderProps), {}, {
              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
            })), /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
              tonal: tonal,
              color: "default",
              version: "text",
              size: "small",
              min: 1,
              max: 100,
              value: quality,
              increment: false,
              decrement: false,
              onChange: valueNew_21 => onChangeQuality(+valueNew_21),
              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
              style: {
                width: 34
              }
            })]
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
            gap: 1,
            direction: "row",
            align: "center",
            justify: "center",
            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-action'], classes.action]),
            children: [(0, _utils.is)('function', renderSave) ? renderSave(onSave) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
              name: l('Save')
            }, TooltipProps), {}, {
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
                version: "outlined",
                onClick: onSave
              }, IconButtonProps), {}, {
                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconSave, {})
              }))
            })), (0, _utils.is)('function', renderCancel) ? renderCancel(onSave) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
              name: l('Cancel')
            }, TooltipProps), {}, {
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
                version: "outlined",
                onClick: onCancel
              }, IconButtonProps), {}, {
                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconCancel, {})
              }))
            }))]
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
          color: "inherit",
          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-divider'], classes.divider])
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
        direction: "column",
        align: "center",
        justify: "center",
        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-options'], classes.options]),
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
          gap: 1,
          direction: "row",
          justify: "flex-start",
          children: [options.map((item_4, index_0) => (0, _utils.is)('function', renderOption) ? renderOption(item_4, open && openOption === item_4.value, openOption) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
            name: item_4.label
          }, TooltipProps), {}, {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
              version: "outlined",
              selected: open && openedOption === item_4.value,
              onClick: () => openOption(item_4.value)
            }, IconButtonProps), {}, {
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(item_4.Icon, {})
            }))
          }), index_0)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
            gap: 0,
            direction: "row",
            align: "center",
            children: [downloadOption && (0, _utils.is)('function', renderDownload) ? renderDownload(onDownload) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
              name: l('Download')
            }, TooltipProps), {}, {
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
                version: "text",
                onClick: onDownload
              }, IconButtonProps), {}, {
                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDownload, {})
              }))
            })), (0, _utils.is)('function', renderOptionClear) ? renderOptionClear(onReset) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
              name: l('Reset')
            }, TooltipProps), {}, {
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
                version: "text",
                onClick: onReset
              }, IconButtonProps), {}, {
                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconClear, {})
              }))
            }))]
          })]
        })
      })]
    }), children, meta && value && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
        color: "inherit",
        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-divider'], classes.divider])
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
        gap: 1,
        direction: "row",
        align: "center",
        justify: "center",
        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-meta'], classes.meta]),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, _objectSpread(_objectSpread({}, MetaTypeProps), {}, {
          children: [l('Dimensions'), ": ", (_ref = !open ? value : valueCopy) === null || _ref === void 0 ? void 0 : _ref.width, "x", (_ref2 = !open ? value : valueCopy) === null || _ref2 === void 0 ? void 0 : _ref2.height]
        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({}, MetaTypeProps), {}, {
          children: "\xB7"
        })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, _objectSpread(_objectSpread({}, MetaTypeProps), {}, {
          children: [l('Size'), ": ", size]
        }))]
      })]
    })]
  }));
};
ImageEdit.displayName = 'onesy-ImageEdit';
var _default = exports.default = ImageEdit;