<template>
  <ActionRail
    :actions="viewActions"
    :menu-props="menuProps"
    :menu-on="menuOn"
    :menu-activator-props="menuActivatorProps"
  >
    <template #visible="{ action }">
      <Component :is="action.component" :view="view" variant="button" @update:modal="onActionModal" />
    </template>
    <template #hidden="{ action }">
      <Component :is="action.component" :view="view" variant="menu-item" @update:modal="onActionModal" />
    </template>
  </ActionRail>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { ScanView } from '@3cr/types-ts';
import FlipVerticalAction from '@/components/modal/actions/FlipVerticalAction.vue';
import FlipHorizontalAction from '@/components/modal/actions/FlipHorizontalAction.vue';
import FullscreenAction from '@/components/modal/actions/FullscreenAction.vue';
import PanAction from '@/components/modal/actions/PanAction.vue';
import ResetViewAction from '@/components/modal/actions/ResetViewAction.vue';
import Rotate2dAction from '@/components/modal/actions/Rotate2dAction.vue';
import Slice3dAction from '@/components/modal/actions/Slice3dAction.vue';
import ZoomAction from '@/components/modal/actions/ZoomAction.vue';

interface Props {
  view: ScanView;
}

type Emits = {
  modal: [boolean];
};

type ActionItem = {
  component: any;
  width: number;
  condition: boolean;
};

const props = defineProps<Props>();

const emit = defineEmits<Emits>();

const menuProps = computed(() => ({
  closeOnContentClick: false
}));

const menuOn = computed(() => ({
  'update:modelValue': onActionModal
}));

const menuActivatorProps = computed(() => ({
  icon: 'more_vert',
  variant: 'text',
  color: 'white'
}));

const viewActions = computed(() => {
  return actions.value.filter((action) => action.condition);
});

const actions = computed<ActionItem[]>(() => [
  {
    component: FullscreenAction,
    width: 52,
    condition: true
  },
  {
    component: ResetViewAction,
    width: 52,
    condition: true
  },
  {
    component: PanAction,
    width: 52,
    condition: true
  },
  {
    component: ZoomAction,
    width: 52,
    condition: true
  },
  {
    component: Slice3dAction,
    width: 52,
    condition: props.view === ScanView.Volume
  },
  {
    component: Rotate2dAction,
    width: 52,
    condition: props.view !== ScanView.Volume
  },
  {
    component: FlipHorizontalAction,
    width: 52,
    condition: props.view !== ScanView.Volume
  },
  {
    component: FlipVerticalAction,
    width: 52,
    condition: props.view !== ScanView.Volume
  }
]);

async function onActionModal(value: boolean): Promise<void> {
  emit('modal', value);
}
</script>
