import { defineComponent } from 'vue';
import { SbMode } from '@schlechtenburg/core';

export default defineComponent({
  async setup() {
    const { me } = useMe();

    const { page } = usePage();

    const {
      mode,
      edit,
      cancel,
      save,
    } = useEditor();

    return () => (
      <div class="ex-page-toolbar">
        { mode.value === SbMode.View
          ? <button
            type="button"
            onClick={() => edit(page.value?.attributes?.block!)}
          >Edit</button>
          : <>
            <button
              type="button"
              onClick={() => cancel()}
            >Cancel</button>
            <button
              type="button"
              onClick={() => save()}
            >Save</button>
          </>}
      </div>
    );
  },
});