import type { Meta, StoryObj } from '@storybook/vue3'
import { computed, onUnmounted, provide, ref } from 'vue'
import { createI18n } from 'vue-i18n'
import en from '../../lang/en.json'
import sv from '../../lang/sv.json'
import { FDS_VUE_CORE_I18N_KEY, type FdsI18nLike } from '../../plugin/i18n'
import FdsButtonPrimary from '../Buttons/FdsButtonPrimary/FdsButtonPrimary.vue'
import FdsButtonSecondary from '../Buttons/FdsButtonSecondary/FdsButtonSecondary.vue'
import FdsModal from '../FdsModal/FdsModal.vue'
import { useDevModeToggles } from '../../composables/useDevModeToggles'
import FdsDevMode from './FdsDevMode.vue'

const meta: Meta<typeof FdsDevMode> = {
  title: 'FDS/FdsDevMode',
  component: FdsDevMode,
  tags: ['autodocs'],
  decorators: [
    () => ({
      setup() {
        const i18n = createI18n({
          legacy: false,
          locale: 'sv',
          fallbackLocale: 'en',
          messages: { sv, en },
        }) as unknown as FdsI18nLike

        provide(FDS_VUE_CORE_I18N_KEY, i18n)
      },
      template: '<div style="min-height: 300px; position: relative;"><story /></div>',
    }),
  ],
  argTypes: {
    environment: {
      control: { type: 'select' },
      options: ['localhost', 'development', 'development:feature-branch', 'preprod'],
    },
    toggles: { control: false, table: { disable: true } },
    customActions: { control: false, table: { disable: true } },
    toggleChecked: { control: false, table: { disable: true } },
    toggleSelected: { control: false, table: { disable: true } },
  },
  args: {
    environment: 'development',
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Localhost: Story = {
  args: {
    environment: 'localhost',
  },
}

export const Development: Story = {
  args: {
    environment: 'development',
  },
}

export const DevelopmentFeatureBranch: Story = {
  args: {
    environment: 'development:feature-branch',
  },
}

export const Preprod: Story = {
  args: {
    environment: 'preprod',
  },
}

export const WithOverlayToggles: Story = {
  args: {
    environment: 'development',
  },
  render: (args) => ({
    components: { FdsDevMode, FdsModal, FdsButtonPrimary, FdsButtonSecondary },
    setup() {
      const isApiErrorModalOpen = ref(false)
      const apiErrorActive = ref(false)
      const debugLogging = ref(false)

      const toggles = [
        {
          key: 'apiError',
          type: 'check' as const,
          onToggle: (value: boolean) => {
            if (value) isApiErrorModalOpen.value = true
            if (!value) {
              apiErrorActive.value = false
              isApiErrorModalOpen.value = false
            }
          },
        },
        {
          key: 'debugLogging',
          type: 'check' as const,
          onToggle: (value: boolean) => {
            debugLogging.value = value
          },
        },
      ]

      const toggleChecked = computed(() => ({
        apiError: isApiErrorModalOpen.value || apiErrorActive.value,
        debugLogging: debugLogging.value,
      }))

      const confirmApiError = () => {
        apiErrorActive.value = true
        isApiErrorModalOpen.value = false
      }

      const cancelApiError = () => {
        isApiErrorModalOpen.value = false
      }

      return {
        args,
        toggles,
        toggleChecked,
        isApiErrorModalOpen,
        confirmApiError,
        cancelApiError,
      }
    },
    template: `
      <div>
        <p class="mb-4 text-sm">Snabbval med <code>onToggle</code> per toggle. Checkbox-state via <code>toggle-checked</code>.</p>
        <FdsDevMode :environment="args.environment" :toggles="toggles" :toggle-checked="toggleChecked" />

        <FdsModal v-model:open="isApiErrorModalOpen" heading="Simulera API-fel?">
          <p class="mb-4">Bekräfta för att aktivera simulerat API-fel.</p>
          <div class="flex justify-end gap-3">
            <FdsButtonSecondary text="Avbryt" @click="cancelApiError" />
            <FdsButtonPrimary text="Aktivera" @click="confirmApiError" />
          </div>
        </FdsModal>
      </div>
    `,
  }),
}

export const WithRegisteredToggles: Story = {
  args: {
    environment: 'development',
  },
  render: (args) => ({
    components: { FdsDevMode },
    setup() {
      const { register, unregister } = useDevModeToggles()
      const slowNetwork = ref(false)

      register({
        key: 'slowNetwork',
        type: 'check',
        labelKey: 'FdsDevMode.overlay.toggles.debugLogging',
        onToggle: (value) => {
          slowNetwork.value = value
        },
      })

      onUnmounted(() => {
        unregister('slowNetwork')
      })

      return { args, slowNetwork }
    },
    template: `
      <div>
        <p class="mb-4 text-sm">Registrerat via <code>useDevModeToggles().register()</code> – inga toggles-prop behövs.</p>
        <FdsDevMode :environment="args.environment" />
        <p class="mt-4 text-sm">slowNetwork: {{ slowNetwork }}</p>
      </div>
    `,
  }),
}