<template>
  <h-list :split="false">
    <h-tooltip>
      <h-list-item>
        <span :style="{ opacity: 1 }">
          {{ t('app.setting.content-width') }}
        </span>
        <template #actions>
          <h-select
            size="small"
            :value="contentWidth"
            @select="val => handleChange('contentWidth', val)"
          >
            <h-select-option v-if="layout === 'side'" value="Fixed">
              {{ t('app.setting.content-width.fixed') }}
            </h-select-option>
            <h-select-option value="Fluid">
              {{ t('app.setting.content-width.fluid') }}
            </h-select-option>
          </h-select>
        </template>
      </h-list-item>
    </h-tooltip>

    <h-tooltip placement="left" :title="layout === 'mix' ? t('app.setting.fixedheader.hint') : ''">
      <h-list-item>
        <span :style="{ opacity: 1 }">{{ t('app.setting.fixedheader') }}</span>
        <template #actions>
          <h-switch
            size="small"
            :checked="!!fixedHeader"
            :disabled="layout === 'mix'"
            @change="checked => handleChange('fixedHeader', checked)"
          />
        </template>
      </h-list-item>
    </h-tooltip>

    <h-tooltip :title="layout === 'top' ? t('app.setting.fixedsidebar.hint') : ''">
      <h-list-item>
        <span :style="{ opacity: 1 }">{{ t('app.setting.fixedsidebar') }}</span>
        <template #actions>
          <h-switch
            size="small"
            :disabled="layout === 'top'"
            :checked="!!fixSiderbar"
            @change="checked => handleChange('fixSiderbar', checked)"
          />
        </template>
      </h-list-item>
    </h-tooltip>

    <h-tooltip placement="left" :title="layout === 'mix' ? '' : t('app.setting.layout.mix.hint')">
      <h-list-item>
        <span :style="{ opacity: 1 }">{{ t('app.setting.split.menus') }}</span>
        <template #actions>
          <h-switch
            size="small"
            :disabled="layout !== 'mix'"
            :checked="!!splitMenus"
            @change="checked => handleChange('splitmenus', checked)"
          />
        </template>
      </h-list-item>
    </h-tooltip>
  </h-list>
</template>

<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
import { useI18n } from '@crami/locale';

export default defineComponent({
  props: {
    contentWidth: { type: String as PropType<'Fluid' | 'Fixed'>, default: 'Fluid' },
    fixedHeader: Boolean,
    fixSiderbar: Boolean,
    splitMenus: Boolean,
    layout: { type: String as PropType<'side' | 'top' | 'mix' | 'left'> },
    onChange: Function as PropType<(arg: { type: string; value: string }) => void>,
  },
  setup(_props, { emit }) {
    const { t } = useI18n();
    const handleChange = (type: string, value: any) => {
      emit('change', { type, value });
    };

    return {
      t,
      handleChange,
    };
  },
});
</script>
