import { Meta, StoryObj } from '@storybook/vue3'
import RoleField from './RoleField.vue'

const meta: Meta<typeof RoleField> = {
  title: 'Fields/Domain/RoleField',
  component: RoleField
}

export default meta
type Story = StoryObj<typeof RoleField>

const Template = (args: any) => ({
  components: { RoleField },
  setup() {
    return { args }
  },
  template: `
    <div>
      <RoleField
        v-bind="args"
        @update:modelValue="args.modelValue = $event"
      />
      <div v-if="args.modelValue" class="mt-3">
        <strong>Roles:</strong>
        <p>Selected: {{ args.modelValue.selectedRoleIds.join(', ') }}</p>
        <p v-if="args.modelValue.primaryRoleId">Primary: {{ args.modelValue.primaryRoleId }}</p>
      </div>
    </div>
  `
})

export const Empty: Story = {
  render: Template,
  args: {
    modelValue: null
  }
}

export const Operator: Story = {
  render: Template,
  args: {
    modelValue: {
      selectedRoleIds: ['operator'],
      primaryRoleId: 'operator'
    }
  }
}

export const ManagerWithOperator: Story = {
  render: Template,
  args: {
    modelValue: {
      selectedRoleIds: ['manager', 'operator'],
      primaryRoleId: 'manager'
    }
  }
}

export const AdminFull: Story = {
  render: Template,
  args: {
    modelValue: {
      selectedRoleIds: ['admin', 'manager', 'operator'],
      primaryRoleId: 'admin'
    }
  }
}

export const MultipleRoles: Story = {
  render: Template,
  args: {
    modelValue: {
      selectedRoleIds: ['operator', 'auditor', 'warehouse'],
      primaryRoleId: 'operator'
    }
  }
}