import ICONS from './icons'
import DefaultButton from './DefaultButton.vue'

const icons = Object.keys(ICONS)

export default {
  title: 'The Design system/Buttons/Default button',
  component: DefaultButton,
  tags: ['autodocs'],
  args: {
    isDisabled: false,
    isLoading: false,
    isError: false,
    isShowTooltip: false,
    isActive: false,

    label: 'Добавить',
    size: 'M',
    color: '',
    colorDisabled: '',
    colorHover: '',
  },
  argTypes: {
    type: {
      description: 'Вариант внешнего вида кнопки',
      control: { type: 'radio' },
      options: ['primary', 'secondary', 'tertiary'],
      defaultValue: 'primary',
    },
    isDisabled: {
      options: [true, false],
      control: { type: 'boolean' },
    },
    icon: {
      options: ['', ...icons],
      control: { type: 'select' },
    },
    size: {
      description: 'Вариант размера кнопки',
      options: ['M', 'S'],
      control: { type: 'radio' },
    },
  },
}

const Template = (args: any) => ({
  props: Object.keys(args),
  render() {
    const table = 'display: grid; gap: 30px 15px; grid-template-columns: 10% repeat(7, min-content); align-items: center; justify-items: center;'
    const title = 'text-align: center; margin:0 0 5px; font-size: 14px; line-height: 16px; color: #585B69; font-weight: 400;'
    const plate = 'display: flex; flex-direction: column; align-items: center; width: min-content; padding: 10px;'

    return (
      <div class="table" style={table}>
        <div class="plate" style={plate}>
          <h5 style={`${title} width: max-content;`}>Primary M</h5>
        </div>

        <div class="plate" style={plate}>
          <h5 style={title}>Default</h5>
          <DefaultButton { ...args } />
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disable</h5>
          <DefaultButton { ...args } isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton { ...args } isError={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>With icon</h5>
          <DefaultButton {...args} icon={'plus'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Icon</h5>
          <DefaultButton {...args} label={''} icon={'loaderTwo'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disabled</h5>
          <DefaultButton {...args} label={''} icon={'loaderTwo'} isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton {...args} label={''} icon={'loaderTwo'} isError={true}/>
        </div>

        <div class="plate" style={plate}>
          <h5 style={`${title} width: max-content;`}>Secondary M</h5>
        </div>

        <div class="plate" style={plate}>
          <h5 style={title}>Disable</h5>
          <DefaultButton {...args} type={'secondary'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disable</h5>
          <DefaultButton {...args} type={'secondary'} isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton {...args} type={'secondary'} isError={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>With icon</h5>
          <DefaultButton {...args} type={'secondary'} icon={'plus'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Icon</h5>
          <DefaultButton {...args} type={'secondary'} label={''} icon={'loaderTwo'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disabled</h5>
          <DefaultButton {...args} type={'secondary'} label={''} icon={'loaderTwo'} isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton {...args} type={'secondary'} label={''} icon={'loaderTwo'} isError={true}/>
        </div>

        <div class="plate" style={plate}>
          <h5 style={`${title} width: max-content;`}>Tertiary M</h5>
        </div>

        <div class="plate" style={plate}>
          <h5 style={title}>Disable</h5>
          <DefaultButton {...args} type={'tertiary'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disable</h5>
          <DefaultButton {...args} type={'tertiary'} isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton {...args} type={'tertiary'} isError={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>With icon</h5>
          <DefaultButton {...args} type={'tertiary'} icon={'plus'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Icon</h5>
          <DefaultButton {...args} type={'tertiary'} label={''} icon={'loaderTwo'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disabled</h5>
          <DefaultButton {...args} type={'tertiary'} label={''} icon={'loaderTwo'} isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton {...args} type={'tertiary'} label={''} icon={'loaderTwo'} isError={true}/>
        </div>

        <div class="plate" style={plate}>
          <h5 style={`${title} width: max-content;`}>Critical M</h5>
        </div>

        <div class="plate" style={plate}>
          <h5 style={title}>Default</h5>
          <DefaultButton {...args} type={'critical'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disable</h5>
          <DefaultButton {...args} type={'critical'} isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton {...args} type={'critical'} isError={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>With icon</h5>
          <DefaultButton {...args} type={'critical'} icon={'plus'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Icon</h5>
          <DefaultButton {...args} type={'critical'} label={''} icon={'loaderTwo'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disabled</h5>
          <DefaultButton {...args} type={'critical'} label={''} icon={'loaderTwo'} isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton {...args} type={'critical'} label={''} icon={'loaderTwo'} isError={true}/>
        </div>

        <div class="plate" style={plate}>
          <h5 style={`${title} width: max-content;`}>Primary S</h5>
        </div>

        <div class="plate" style={plate}>
          <h5 style={title}>Default</h5>
          <DefaultButton {...args} size={'S'} />
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disable</h5>
          <DefaultButton {...args} size={'S'} isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton {...args} size={'S'} isError={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>With icon</h5>
          <DefaultButton {...args} size={'S'} icon={'plus'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Icon</h5>
          <DefaultButton {...args} size={'S'} label={''} icon={'loaderTwo'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disabled</h5>
          <DefaultButton {...args} size={'S'} label={''} icon={'loaderTwo'} isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton {...args} size={'S'} label={''} icon={'loaderTwo'} isError={true}/>
        </div>

        <div class="plate" style={plate}>
          <h5 style={`${title} width: max-content;`}>Secondary S</h5>
        </div>

        <div class="plate" style={plate}>
          <h5 style={title}>Disable</h5>
          <DefaultButton {...args} size={'S'} type={'secondary'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disable</h5>
          <DefaultButton {...args} size={'S'} type={'secondary'} isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton {...args} size={'S'} type={'secondary'} isError={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>With icon</h5>
          <DefaultButton {...args} size={'S'} type={'secondary'} icon={'plus'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Icon</h5>
          <DefaultButton {...args} size={'S'} type={'secondary'} label={''} icon={'loaderTwo'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disabled</h5>
          <DefaultButton {...args} size={'S'} type={'secondary'} label={''} icon={'loaderTwo'} isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton {...args} size={'S'} type={'secondary'} label={''} icon={'loaderTwo'} isError={true}/>
        </div>

        <div class="plate" style={plate}>
          <h5 style={`${title} width: max-content;`}>Tertiary S</h5>
        </div>

        <div class="plate" style={plate}>
          <h5 style={title}>Disable</h5>
          <DefaultButton {...args} size={'S'} type={'tertiary'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disable</h5>
          <DefaultButton {...args} size={'S'} type={'tertiary'} isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton {...args} size={'S'} type={'tertiary'} isError={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>With icon</h5>
          <DefaultButton {...args} size={'S'} type={'tertiary'} icon={'plus'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Icon</h5>
          <DefaultButton {...args} size={'S'} type={'tertiary'} label={''} icon={'loaderTwo'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disabled</h5>
          <DefaultButton {...args} size={'S'} type={'tertiary'} label={''} icon={'loaderTwo'} isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton {...args} size={'S'} type={'tertiary'} label={''} icon={'loaderTwo'} isError={true}/>
        </div>

        <div class="plate" style={plate}>
          <h5 style={`${title} width: max-content;`}>Critical S</h5>
        </div>

        <div class="plate" style={plate}>
          <h5 style={title}>Default</h5>
          <DefaultButton {...args} size={'S'} type={'critical'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disable</h5>
          <DefaultButton {...args} size={'S'} type={'critical'} isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton {...args} size={'S'} type={'critical'} isError={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>With icon</h5>
          <DefaultButton {...args} size={'S'} type={'critical'} icon={'plus'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Icon</h5>
          <DefaultButton {...args} size={'S'} type={'critical'} label={''} icon={'loaderTwo'}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Disabled</h5>
          <DefaultButton {...args} size={'S'} type={'critical'} label={''} icon={'loaderTwo'} isDisabled={true}/>
        </div>
        <div class="plate" style={plate}>
          <h5 style={title}>Error</h5>
          <DefaultButton {...args} size={'S'} type={'critical'} label={''} icon={'loaderTwo'} isError={true}/>
        </div>
      </div>
    )
  },
})

export const Primary = Template.bind({})

const TooltipTemplate = (args: any) => ({
  render() {
    return (
      <div>
        <h5>Проверка на максимальную ширину с тултипом</h5>
        <p>Пропс `label` и `isShowTooltip` захардкоржены</p>

        <div style="max-width: 200px;">
          <DefaultButton { ...args } label="Очень очень очень очень очень очень большой широкий текст" isShowTooltip />
        </div>
      </div>
    )
  },
})

export const Tooltip = TooltipTemplate.bind({})

const ActionTemplate = (args: any) => ({
  render() {
    return (
      <div>
        <h5>Кнопка с дополнительным действием</h5>

        <div style="max-width: 200px;">
          <DefaultButton
            { ...args }
            label="Кнопка"
            action={{
              tooltipText: 'Отвязать',
              icon: 'unlink',
              onClick: () => {},

              positionCorrectingX: -53,
            }}
          />
        </div>
      </div>
    )
  },
})

export const Action = ActionTemplate.bind({})

const SlotTemplate = (args: any) => ({
  render() {
    return (
      <div>
        <h5>Кнопка с правым слотом</h5>

        <div style="max-width: 200px;">
          <DefaultButton
            { ...args }
            label="Кнопка"
            icon={'copy'}
            rightSlot={() => <>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 9.5L8 5.5L4 9.5" stroke="#27282E" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </>}
          />
        </div>
      </div>
    )
  },
})

export const Slot = SlotTemplate.bind({})