"use strict";

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _Button = _interopRequireDefault(require("@mui/material/Button"));

var _Grid = _interopRequireDefault(require("@mui/material/Grid"));

var _Popover = _interopRequireDefault(require("@mui/material/Popover"));

var _TextField = _interopRequireDefault(require("@mui/material/TextField"));

var _styles = require("@mui/material/styles");

var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));

var _material = require("@mui/material");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const PREFIX = 'SCRichTextEditorUrlPopover';
const classes = {
  linkPopover: `${PREFIX}-linkPopover`,
  linkTextField: `${PREFIX}-linkTextField`
};
const Root = (0, _styles.styled)(_Popover.default, {
  name: PREFIX,
  slot: 'Root',
  overridesResolver: (_, styles) => styles.root
})(({
  theme
}) => ({
  [`& .${classes.linkPopover}`]: {
    padding: theme.spacing(2, 2, 2, 2),
    maxWidth: 250
  },
  [`& .${classes.linkTextField}`]: {
    width: '100%'
  }
}));

const UrlPopover = props => {
  const [data, setData] = (0, _react.useState)(props.data || {
    url: undefined,
    width: undefined,
    height: undefined,
    alignment: undefined,
    type: undefined
  });

  const onSizeChange = (value, prop) => {
    if (value === '') {
      setData(Object.assign({}, data, {
        [prop]: undefined
      }));
      return;
    }

    const intValue = parseInt(value, 10);

    if (isNaN(intValue)) {
      return;
    }

    setData(Object.assign({}, data, {
      [prop]: intValue
    }));
  };

  return /*#__PURE__*/_react.default.createElement(Root, {
    open: props.anchor !== undefined,
    anchorEl: props.anchor,
    anchorOrigin: {
      vertical: 'bottom',
      horizontal: 'left'
    },
    transformOrigin: {
      vertical: 'top',
      horizontal: 'left'
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: classes.linkPopover
  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
    container: true,
    spacing: 1
  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
    container: true,
    item: true,
    xs: true,
    spacing: 1
  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    xs: 12
  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
    className: classes.linkTextField,
    onChange: event => setData(Object.assign({}, data, {
      url: event.target.value
    })),
    label: "URL",
    defaultValue: props.data && props.data.url,
    autoFocus: true,
    InputLabelProps: {
      shrink: true
    }
  })), props.isMedia ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    xs: 12
  }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
    fullWidth: true
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    color: !data.type || data.type === 'image' ? 'primary' : 'inherit',
    size: "small",
    onClick: () => setData(Object.assign({}, data, {
      type: 'image'
    }))
  }, /*#__PURE__*/_react.default.createElement(_material.Icon, null, "photo")), /*#__PURE__*/_react.default.createElement(_Button.default, {
    color: data.type === 'video' ? 'primary' : 'inherit',
    size: "small",
    onClick: () => setData(Object.assign({}, data, {
      type: 'video'
    }))
  }, /*#__PURE__*/_react.default.createElement(_material.Icon, null, "movie")))), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    xs: 6
  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
    onChange: event => onSizeChange(event.target.value, 'width'),
    value: data.width || '',
    label: "Width",
    InputLabelProps: {
      shrink: true
    }
  })), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    xs: 6
  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
    onChange: event => onSizeChange(event.target.value, 'height'),
    value: data.height || '',
    label: "Height",
    InputLabelProps: {
      shrink: true
    }
  })), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    xs: 12
  }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
    fullWidth: true
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    color: data.alignment === 'left' ? 'primary' : 'inherit',
    size: "small",
    onClick: () => setData(Object.assign({}, data, {
      alignment: 'left'
    }))
  }, /*#__PURE__*/_react.default.createElement(_material.Icon, null, "format_align_left")), /*#__PURE__*/_react.default.createElement(_Button.default, {
    color: data.alignment === 'center' ? 'primary' : 'inherit',
    size: "small",
    onClick: () => setData(Object.assign({}, data, {
      alignment: 'center'
    }))
  }, /*#__PURE__*/_react.default.createElement(_material.Icon, null, "format_align_center")), /*#__PURE__*/_react.default.createElement(_Button.default, {
    color: data.alignment === 'right' ? 'primary' : 'inherit',
    size: "small",
    onClick: () => setData(Object.assign({}, data, {
      alignment: 'right'
    }))
  }, /*#__PURE__*/_react.default.createElement(_material.Icon, null, "format_align_right"))))) : null), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    container: true,
    item: true,
    xs: 12,
    direction: "row",
    justifyContent: "flex-end"
  }, props.data && props.data.url ? /*#__PURE__*/_react.default.createElement(_Button.default, {
    onClick: () => props.onConfirm(props.isMedia, '')
  }, /*#__PURE__*/_react.default.createElement(_material.Icon, null, "delete")) : null, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onClick: () => props.onConfirm(props.isMedia, data.url, data.width, data.height, data.alignment, data.type)
  }, /*#__PURE__*/_react.default.createElement(_material.Icon, null, "check"))))));
};

var _default = UrlPopover;
exports.default = _default;