import { ASSETS_URL } from '../../../../consts/common';
import type { AvatarProps } from '../../../avatar';
import { TextWithTooltip } from '../../../text-with-tooltip';
import type {
  RenderAvatarGroupCellProps,
  RenderTextGroupCellProps,
  RenderTextListCellProps
} from '../column-types';
import type { CardGridActionIcon, CardGridProps, CardGridColDef, CardGridRowDef } from '../types';

const generateActionButtons = (onClick: CardGridActionIcon['onClick']) =>
  [
    {
      icon: { src: `${ASSETS_URL}/icons2/icon_trash.svg` },
      value: 'delete',
      onClick,
      title: 'Delete'
    },
    {
      icon: { src: `${ASSETS_URL}/icons2/icon_edit.svg` },
      value: 'edit',
      onClick,
      title: 'Edit'
    },
    {
      icon: { src: `${ASSETS_URL}/icons2/icon_view.svg` },
      value: 'view',
      onClick,
      title: 'View'
    }
  ] as CardGridColDef['actions'];

const generateMembersAvatars = (count: number) =>
  [
    { 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(count > 6 ? Array(count - 6).fill({}) : []) as AvatarProps[];

interface GroupsCardsRowDef extends CardGridRowDef {
  groupName: RenderTextGroupCellProps['cell'];
  members: RenderAvatarGroupCellProps['cell'];
  networks: RenderTextListCellProps['cell'];
}

export const mockGroupsCards = ({
  onActionClick,
  onCounterClick
}: {
  onActionClick?: CardGridActionIcon['onClick'];
  onCounterClick?: AvatarProps['onClick'];
}) =>
  ({
    hideColumnHeaders: false,
    cols: [
      {
        field: 'groupName',
        headerName: 'Group Name',
        type: 'textGroup',
        renderHeader: ({ colDef }) => (
          // for demo purposes
          <TextWithTooltip
            numOfLines={1}
            text={`${colDef.headerName}`}
            title={colDef.description}
            {...(colDef.description && { disableHoverListener: false })}
          />
        )
      },
      {
        field: 'members',
        headerName: 'Members',
        headerClassName: 'p81-members',
        description: 'Group Members',
        type: 'avatarGroup',
        cellEmptyState: 'N/A'
      },
      {
        field: 'networks',
        headerName: 'Networks',
        headerClassName: () => 'p81-networks',
        description: 'Group Networks',
        type: 'textList',
        cellEmptyState: 'N/A'
      },
      {
        field: 'actionButtons',
        type: 'actionButtons',
        actions: generateActionButtons(onActionClick)
      }
    ],
    rows: [
      {
        id: 'row1',
        groupName: {
          title: 'Administrators',
          subtitle: '18 members',
          avatarProps: {
            icon: {
              src: `${ASSETS_URL}/icons2/icon_members.svg`
            }
          }
        },
        members: {
          avatars: generateMembersAvatars(18),
          onCounterClick
        },
        networks: {
          text: ['Developers', 'Sales', 'Production', 'All Users', 'Admins']
        }
      },
      {
        id: 'row2',
        groupName: {
          title: 'Sales',
          subtitle: '12 members',
          avatarProps: {
            icon: {
              src: `${ASSETS_URL}/icons2/icon_members.svg`
            }
          }
        },
        members: {
          avatars: generateMembersAvatars(12),
          onCounterClick
        },
        networks: {
          text: ['Sales', 'Developers', 'Production', 'All Users', 'Admins']
        }
      },
      {
        id: 'row3',
        groupName: {
          title: 'New York HQ',
          subtitle: '123 members',
          avatarProps: {
            icon: {
              src: `${ASSETS_URL}/icons2/icon_members.svg`
            }
          }
        },
        members: {
          avatars: generateMembersAvatars(123),
          onCounterClick
        },
        networks: {
          text: ['Production', 'Developers', 'Sales', 'All Users', 'Admins']
        }
      },
      {
        id: 'row4',
        groupName: {
          title: 'Managers',
          subtitle: '8 members',
          avatarProps: {
            icon: {
              src: `${ASSETS_URL}/icons2/icon_members.svg`
            }
          }
        },
        members: {
          avatars: generateMembersAvatars(8),
          onCounterClick
        },
        networks: {
          text: ['Managers', 'Sales', 'Production', 'All Users', 'Admins']
        }
      },
      {
        id: 'row5',
        groupName: {
          title: 'Design Team',
          subtitle: '6 members',
          avatarProps: {
            icon: {
              src: `${ASSETS_URL}/icons2/icon_members.svg`
            }
          }
        },
        members: {
          avatars: generateMembersAvatars(6),
          onCounterClick
        },
        networks: {
          text: ['Designers', 'Sales', 'Production', 'All Users', 'Admins']
        }
      },
      {
        id: 'row6',
        groupName: {
          title: 'Marketing',
          subtitle: '8 members',
          avatarProps: {
            icon: {
              src: `${ASSETS_URL}/icons2/icon_members.svg`
            }
          }
        },
        members: {
          avatars: generateMembersAvatars(8),
          onCounterClick
        },
        networks: {
          text: ['Marketing', 'Sales', 'Production', 'All Users', 'Admins']
        }
      },
      {
        id: 'row7',
        groupName: {
          title: 'Empty',
          subtitle: '0 members',
          avatarProps: {
            icon: {
              src: `${ASSETS_URL}/icons2/icon_members.svg`
            }
          }
        },
        members: {
          avatars: []
        },
        networks: {
          text: []
        }
      }
    ] as GroupsCardsRowDef[]
  } as CardGridProps);