import type { Story, Meta } from '@storybook/react';

import { ASSETS_URL } from '../../consts/common';
import { UserControls } from './user-controls';
import type { UserControlsProps } from './types';

export default {
  component: UserControls,
  title: 'Layout/Header/UserControls',
  argTypes: {
    name: {
      description: 'Name to be displayed.'
    },
    userRole: {
      description: 'User role to be displayed.',
      options: ['User', 'Admin', 'CS_Admin', 'Developer'],
      control: {
        type: 'select'
      }
    },
    avatarProps: {
      description: 'Props to be supplied directly into the avatar component.'
    },
    notificationBadgeProps: {
      description:
        'Props to be supplied directly into the badge component, see material-ui`s for props documentation'
    },
    showDividers: {
      description: 'Enables vertical dividers rendering.',
      control: {
        type: 'boolean'
      },
      table: {
        defaultValue: {
          summary: false
        }
      }
    },
    showIconSearch: {
      description: 'Controls visibility of the search icon.',
      control: {
        type: 'boolean'
      },
      table: {
        defaultValue: {
          summary: true
        }
      }
    },
    showIconSettings: {
      description: 'Controls visibility of the settings icon.',
      control: {
        type: 'boolean'
      },
      table: {
        defaultValue: {
          summary: true
        }
      }
    },
    showIconNotification: {
      description: 'Controls visibility of the notification icon.',
      control: {
        type: 'boolean'
      },
      table: {
        defaultValue: {
          summary: true
        }
      }
    },
    iconButtons: {
      description: 'List of buttons, each button may contain icon and/or title with optional link.'
    },
    userArrowCallback: {
      description: 'Callback to be fired on the user arrow icon click.'
    },
    classes: {
      description: 'Override classes.'
    }
  }
} as Meta;

const Template: Story<UserControlsProps> = args => <UserControls {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  name: 'Sagi Gidali',
  userRole: 'Admin',
  avatarProps: {
    src: 'https://cdn.iconscout.com/icon/free/png-256/avatar-366-456318.png'
  },
  notificationBadgeProps: {
    badgeContent: 2
  },
  showDividers: true,
  showIconSearch: false,
  showIconSettings: false,
  showIconNotification: true,
  iconButtons: [
    {
      href: '/help',
      icon: {
        src: `${ASSETS_URL}/icons/icon_help.svg`
      },
      title: 'Need Help?'
    }
  ],
  userArrowCallback: () => alert('Arrow callback'),
  classes: {}
};

export const WithIconButtons = Template.bind({});
WithIconButtons.args = {
  name: 'John Doe',
  userRole: 'User',
  avatarProps: {
    src: 'https://upload.wikimedia.org/wikipedia/commons/8/8f/Cute-kittens-12929201-1600-1200.jpg'
  },
  notificationBadgeProps: {
    badgeContent: 11
  },
  showDividers: true,
  showIconSearch: false,
  showIconSettings: true,
  showIconNotification: true,
  iconButtons: [
    {
      title: 'Text only',
      onClick: () => alert('Text is clicked!'),
      testqa: 'click1'
    },
    {
      icon: {
        src: `${ASSETS_URL}/icons/icon_linux.svg`
      },
      title: 'Without link',
      onClick: () => alert('Button is clicked!')
    },
    {
      href: '//www.linux.org/',
      icon: {
        src: `${ASSETS_URL}/icons/icon_linux.svg`
      }
    },
    {
      href: '/help',
      icon: {
        src: `${ASSETS_URL}/icons/icon_help.svg`
      },
      title: 'Need Help?'
    }
  ]
};