import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Grid } from '@mui/material';
import { ASSETS_URL } from '../../../consts/common';
import { ApplicationUserCard } from './application-user-card';

export default {
  title: 'Cards/Application User Card',
  component: ApplicationUserCard
} as ComponentMeta<typeof ApplicationUserCard>;

const mokeData = [
  {
    isFavorite: true,
    tagText: 'https',
    tagColor: '#4DC9F6',
    iconBackgroundColor: '#4DC9F6',
    icon: `${ASSETS_URL}/images/apps/icon.svg`,
    appName: 'OfficeAzure',
    appVersion: '10.0.0.5',
    connectHandler: () => alert('Update')
  },
  {
    isFavorite: false,
    tagText: 'https',
    tagColor: '#0099C6',
    iconBackgroundColor: '#0099C6',
    icon: `${ASSETS_URL}/images/apps/icon_appHTTP.svg`,
    appName: 'RDP-MS-2012R2',
    appVersion: '10.0.0.5',
    connectHandler: () => alert('Update')
  },
  {
    isFavorite: true,
    tagText: 'https',
    tagColor: '#4DC9F6',
    icon: `${ASSETS_URL}/icons/icon_AWS.svg`,
    appName: 'Amazon P81',
    appVersion: '10.0.0.5',
    connectHandler: () => alert('Update')
  },
  {
    isFavorite: false,
    tagText: 'rdp',
    tagColor: '#C2185B',
    iconBackgroundColor: '#C2185B',
    icon: `${ASSETS_URL}/images/apps/icon_appRDP.svg`,
    appName: 'OfficeAzure',
    appVersion: '10.0.0.5',
    connectHandler: () => alert('Update')
  },
  {
    isFavorite: false,
    tagText: 'https',
    tagColor: '#4DC9F6',
    iconBackgroundColor: '#2A4274',
    icon: `${ASSETS_URL}/images/apps/icon_appJarvis.svg`,
    appName: 'Jarvis',
    appVersion: '10.0.0.5',
    connectHandler: () => alert('Update')
  },
  {
    isFavorite: false,
    tagText: 'https',
    tagColor: '#4DC9F6',
    iconBackgroundColor: '#4DC9F6',
    icon: `${ASSETS_URL}/images/apps/icon_appSF.svg`,
    appName: 'Sales Force',
    appVersion: '10.0.0.5',
    connectHandler: () => alert('Update')
  },
  {
    isFavorite: false,
    tagText: 'https',
    tagColor: '#4DC9F6',
    icon: `${ASSETS_URL}/images/apps/icon_appGoogle.svg`,
    appName: 'Google Cloud',
    appVersion: '10.0.0.5',
    connectHandler: () => alert('Update')
  },
  {
    isFavorite: false,
    tagText: 'vnc',
    tagColor: '#CB5BCB',
    iconBackgroundColor: '#CB5BCB',
    icon: `${ASSETS_URL}/images/apps/icon_appVNC.svg`,
    appName: 'OfficeAzure',
    appVersion: '10.0.0.5',
    connectHandler: () => alert('Update')
  },
  {
    isFavorite: false,
    tagText: 'https',
    tagColor: '#4DC9F6',
    icon: `${ASSETS_URL}/images/apps/icon_appSSH.svg`,
    appName: 'Amazon P81',
    appVersion: '10.0.0.5',
    connectHandler: () => alert('Update')
  }
];

const Template: ComponentStory<typeof ApplicationUserCard> = args => {
  return (
    <Grid container spacing={2}>
      {mokeData.map(item => (
        <Grid item>
          <ApplicationUserCard {...item} />
        </Grid>
      ))}
    </Grid>
  );
};

export const Primary = Template.bind({});