import React from 'react';

import { StyledEditorToolbar } from '../libs';
import { STYLED_HEADINGS, IEditorToolbarProps } from '../types';

/**
 * @description {Toolbar} - The toolbar for the editor.
 * @param {string} id - The id of the toolbar
 * @param {boolean} simple - Whether the toolbar is simple
 * @param {any} other - Other props for the toolbar
 * @return {JSX.Element} The rendered toolbar component
 */
export const Toolbar = ({ id, simple, ...other }: IEditorToolbarProps) => (
  <StyledEditorToolbar {...other}>
    <div id={id}>
      <div className="ql-formats">
        <select className="ql-header" defaultValue="">
          {STYLED_HEADINGS.map((heading, index) => (
            <option key={heading} value={index + 1}>
              {heading}
            </option>
          ))}
          <option value="">Normal</option>
        </select>
      </div>

      <div className="ql-formats">
        <button type="button" className="ql-bold" />
        <button type="button" className="ql-italic" />
        <button type="button" className="ql-underline" />
        <button type="button" className="ql-strike" />
      </div>

      {!simple && (
        <div className="ql-formats">
          <select className="ql-color" />
          <select className="ql-background" />
        </div>
      )}

      <div className="ql-formats">
        <button type="button" className="ql-list" value="ordered" />
        <button type="button" className="ql-list" value="bullet" />
        {!simple && <button type="button" className="ql-indent" value="-1" />}
        {!simple && <button type="button" className="ql-indent" value="+1" />}
      </div>

      {!simple && (
        <div className="ql-formats">
          <button type="button" className="ql-script" value="super" />
          <button type="button" className="ql-script" value="sub" />
        </div>
      )}

      {!simple && (
        <div className="ql-formats">
          <button type="button" className="ql-code-block" />
          <button type="button" className="ql-blockquote" />
        </div>
      )}

      <div className="ql-formats">
        <button type="button" className="ql-direction" value="rtl" />
        <select className="ql-align" />
      </div>

      <div className="ql-formats">
        <button type="button" className="ql-link" />
        <button type="button" className="ql-image" />
        <button type="button" className="ql-video" />
      </div>

      <div className="ql-formats">
        {!simple && <button type="button" className="ql-formula" />}
        <button type="button" className="ql-clean" />
      </div>
    </div>
  </StyledEditorToolbar>
);