import { createStyles, makeStyles, MenuItem, Select, Tooltip } from '@material-ui/core';
import React from 'react';
import { useLocalization } from "../../hooks/index.js";
const useStyles = makeStyles(theme => {
  return createStyles({
    root: {
      color: theme.palette.type === 'dark' ? theme.palette.common.white : '#556685',
      verticalAlign: 'middle'
    }
  });
});
export const TypographyControl = props => {
  const localization = useLocalization();
  const classes = useStyles();

  const getActiveValue = () => {
    if (props.editor.isActive('paragraph')) {
      return 0;
    } else if (props.editor.isActive('heading', {
      level: 1
    })) {
      return 1;
    } else if (props.editor.isActive('heading', {
      level: 2
    })) {
      return 2;
    } else if (props.editor.isActive('heading', {
      level: 3
    })) {
      return 3;
    } else if (props.editor.isActive('heading', {
      level: 4
    })) {
      return 4;
    } else if (props.editor.isActive('heading', {
      level: 5
    })) {
      return 5;
    } else if (props.editor.isActive('heading', {
      level: 6
    })) {
      return 6;
    }

    return 0;
  };

  const handleChange = event => {
    if (event.target.value !== 0) {
      props.editor.chain().focus().toggleHeading({
        level: event.target.value
      }).run();
    } else {
      props.editor.chain().focus().setParagraph().run();
    }
  };

  return /*#__PURE__*/React.createElement(Tooltip, {
    title: localization.menubar.typography
  }, /*#__PURE__*/React.createElement(Select, {
    value: getActiveValue(),
    onChange: handleChange,
    disableUnderline: true,
    className: classes.root,
    MenuProps: {
      anchorOrigin: {
        vertical: 'bottom',
        horizontal: 'left'
      },
      transformOrigin: {
        vertical: 'top',
        horizontal: 'left'
      },
      getContentAnchorEl: null
    }
  }, /*#__PURE__*/React.createElement(MenuItem, {
    value: 0
  }, localization.typographyControl.paragraph), /*#__PURE__*/React.createElement(MenuItem, {
    value: 1
  }, localization.typographyControl.heading, " 1"), /*#__PURE__*/React.createElement(MenuItem, {
    value: 2
  }, localization.typographyControl.heading, " 2"), /*#__PURE__*/React.createElement(MenuItem, {
    value: 3
  }, localization.typographyControl.heading, " 3"), /*#__PURE__*/React.createElement(MenuItem, {
    value: 4
  }, localization.typographyControl.heading, " 4"), /*#__PURE__*/React.createElement(MenuItem, {
    value: 5
  }, localization.typographyControl.heading, " 5"), /*#__PURE__*/React.createElement(MenuItem, {
    value: 6
  }, localization.typographyControl.heading, " 6")));
};
//# sourceMappingURL=typography-control.js.map