import { ComponentStory, ComponentMeta } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import uniqueId from 'lodash/uniqueId';

import MuiFormControlLabel from '@mui/material/FormControlLabel';
import MuiGrid from '@mui/material/Grid';

import { ASSETS_URL } from '../../../../consts/common';
import type { AvatarProps } from '../../../avatar';
import { CustomIcon } from '../../../custom-icon';
import { Switch } from '../../../@forms/switch';
import type { SwitchProps } from '../../../@forms/switch';
import { TextWithBG } from '../../../text-with-bg';
import { TextWithTooltip } from '../../../text-with-tooltip';
import { _palette } from '../../../@styles/theme-provider';
import {
  CardGridProps,
  CardGridColDef,
  RenderActionButtonsCell,
  RenderAvatarGroupCell,
  RenderTextGroupCell,
  RenderTextListCell
} from '../../card-grid';

import Card from '../card';

const actionDeleteHandler = action('delete action clicked');
const actionEditHandler = action('edit action clicked');
const actionMoreHandler = action('more action clicked');
const actionViewHandler = action('view action clicked');
const cardClickHandler = action('card clicked');
const cellClickHandler: CardGridProps['onCellClick'] = (e, props) => {
  e.stopPropagation();
  action(`${props?.field} cell clicked`)(e);
};
const counterClickHandler: AvatarProps['onClick'] = e => {
  e.stopPropagation();
  action('counter clicked')(e);
};
const switchChangeHandler: SwitchProps['onChange'] = (e, checked) => {
  e.stopPropagation();
  action('switch toggled')(e);
};

const actionButtons: CardGridColDef['actions'] = [
  {
    icon: { src: `${ASSETS_URL}/icons2/icon_trash.svg` },
    value: 'delete',
    onClick: value => actionDeleteHandler
  },
  {
    icon: { src: `${ASSETS_URL}/icons2/icon_edit.svg` },
    value: 'edit',
    onClick: value => actionEditHandler
  },
  {
    icon: { src: `${ASSETS_URL}/icons2/icon_view.svg` },
    value: 'view',
    onClick: value => actionViewHandler
  },
  {
    icon: { rotateDeg: -90, src: `${ASSETS_URL}/icons2/icon_3dots.svg` },
    value: 'more',
    visible: true,
    onClick: value => actionMoreHandler
  }
];

export default {
  title: 'Cards/Card',
  component: Card,
  argTypes: {
    active: {
      description: 'Whether to display card in active state.',
      control: {
        type: 'boolean'
      }
    },
    hovered: {
      description: 'Whether to display card in hovered state.',
      control: {
        type: 'boolean'
      }
    },
    disabled: {
      description: 'Whether to display card in disabled state.',
      control: {
        type: 'boolean'
      }
    },
    indicator: {
      description: 'Whether to show indicator (colored left border).',
      control: {
        type: 'boolean'
      }
    },
    indicatorColor: {
      description: 'Custom color of the indicator.',
      control: {
        type: 'color'
      }
    }
  }
} as ComponentMeta<typeof Card>;

const Template: ComponentStory<typeof Card> = args => <Card {...args} />;

export const Group = Template.bind({});
Group.args = {
  columns: [
    {
      field: 'groupName',
      children: (
        <RenderTextGroupCell
          cell={{
            title: 'Administrators',
            subtitle: '18 members',
            avatarProps: {
              icon: {
                src: `${ASSETS_URL}/icons2/icon_members.svg`
              }
            }
          }}
        />
      ),
      flex: 'auto',
      minWidth: 224,
      maxWidth: 398
    },
    {
      field: 'members',
      children: (
        <RenderAvatarGroupCell
          cell={{
            avatars: [
              { initials: 'SG', backgroundColor: '#266FE2' },
              { initials: 'TD', backgroundColor: '#CB5BCB' },
              { src: 'https://cdn.iconscout.com/icon/free/png-256/avatar-366-456318.png' },
              { initials: 'AJ', backgroundColor: '#4DC9F6' },
              { initials: 'JM', backgroundColor: '#109618' },
              { initials: 'RD', backgroundColor: '#A7260C' }
            ].concat(Array(26).fill({})),
            onCounterClick: counterClickHandler
          }}
        />
      ),
      width: 152
    },
    {
      field: 'groups',
      children: (
        <RenderTextListCell
          cell={{
            text: ['Developers', 'Sales', 'Production', 'All Users', 'Admins']
          }}
        />
      ),
      width: 232
    },
    {
      field: 'networks',
      children: (
        <RenderTextListCell
          cell={{
            text: ['Multiple', 'Networks', 'Group']
          }}
        />
      ),
      width: 88
    },
    {
      field: 'actionButtons',
      children: (
        <RenderActionButtonsCell
          colDef={{
            actions: actionButtons.slice(0, 3),
            field: 'actionButtons'
          }}
          row={{
            id: uniqueId()
          }}
        />
      ),
      align: 'end',
      hideDivider: true,
      marginLeft: 'auto',
      minWidth: 120,
      width: 120
    }
  ],
  active: false,
  hovered: false,
  disabled: false,
  indicator: true,
  onCellClick: cellClickHandler,
  onClick: cardClickHandler
};

export const Application = Template.bind({});
Application.args = {
  columns: [
    {
      field: 'applicationName',
      children: (
        <RenderTextGroupCell
          cell={{
            title: 'VNC-Windows-Azure',
            afterTitle: (
              <MuiGrid container flexWrap="nowrap">
                <TextWithBG backgroundColor={_palette.specialColors[9]} children="HTTPS" />
                <CustomIcon
                  src={`${ASSETS_URL}/icons2/icon_starStroked.svg`}
                  sx={{ marginLeft: 1 }}
                />
              </MuiGrid>
            ),
            subtitle: '10.0.0.5',
            avatarProps: {
              icon: {
                src: `${ASSETS_URL}/icons2/icon_security.svg`
              }
            }
          }}
        />
      ),
      flex: 'auto',
      minWidth: 224,
      maxWidth: 398
    },
    {
      field: 'groups',
      children: (
        <RenderTextListCell
          cell={{
            text: ['Marketing', 'Managers', 'Studio Tel Aviv', 'Perimeter', 'All Users', 'Admins'],
            numOfLines: 2
          }}
        />
      ),
      width: 168
    },
    {
      field: 'devices',
      children: (
        <RenderTextListCell
          cell={{
            text: ['DimaNYHQ', 'Production', 'Staging']
          }}
        />
      ),
      width: 192
    },
    {
      field: 'toggle',
      children: (
        <MuiFormControlLabel
          value="on"
          control={<Switch size="medium" onChange={switchChangeHandler} sx={{ marginLeft: 1 }} />}
          label={<TextWithTooltip text="Office Devices" numOfLines={1} />}
          labelPlacement="start"
          sx={{
            justifyContent: 'space-between',
            marginLeft: 0,
            width: '100%',
            '& .MuiFormControlLabel-label': {
              color: 'inherit'
            }
          }}
        />
      ),
      flex: 'auto'
    },
    {
      field: 'actionButtons',
      children: (
        <RenderActionButtonsCell
          colDef={{
            actions: actionButtons.slice(0, 3),
            field: 'actionButtons'
          }}
          row={{
            id: uniqueId()
          }}
        />
      ),
      align: 'end',
      hideDivider: true,
      marginLeft: 'auto',
      minWidth: 120,
      width: 120
    }
  ],
  indicatorColor: '#4DC9F6',
  onCellClick: cellClickHandler,
  onClick: cardClickHandler
};

export const Gateways = Template.bind({});
Gateways.args = {
  columns: [
    {
      field: 'gatewayName',
      children: (
        <RenderTextGroupCell
          cell={{
            title: 'p81-demo-lvn4jqj98a.pzero.perimeter81.biz',
            subtitle: '125.42.22.44',
            avatarProps: {
              icon: {
                src: `${ASSETS_URL}/icons2/icon_gateways.svg`
              }
            },
            badgeProps: {
              color: 'primary'
            }
          }}
        />
      ),
      flex: 'auto',
      minWidth: 180
    },
    {
      field: 'actionButtons',
      children: (
        <RenderActionButtonsCell
          colDef={{
            actions: actionButtons.slice(3, 4),
            field: 'actionButtons'
          }}
          row={{
            id: uniqueId()
          }}
        />
      ),
      align: 'end',
      hideDivider: true,
      marginLeft: 'auto',
      minWidth: 44,
      width: 44
    }
  ],
  onCellClick: cellClickHandler,
  onClick: cardClickHandler
};