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

import { ASSETS_URL } from '../../../consts/common';
import { Grid } from '../../@layout/grid';
import { Link } from '../../@navigation/link';
import { DictionaryCard } from './dictionary-card';
import type { DictionaryCardProps } from './dictionary-card';

export default {
  component: DictionaryCard,
  title: 'Deprecated/Components/DictionaryCard',
  argTypes: {
    title: {
      description: 'Title of the component.'
    },
    avatarProps: {
      description: 'Props which will be passed into the avatar component.'
    },
    mainIcon: {
      description: 'Main icon to be placed instead of the avatar (avatarProps will be ignored).'
    },
    items: {
      description: 'Items which keys and value will be displayed.'
    }
  }
} as Meta;

const Template: Story<DictionaryCardProps> = args => <DictionaryCard {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  title: 'Title',
  avatarProps: {
    src: 'https://upload.wikimedia.org/wikipedia/commons/8/8f/Cute-kittens-12929201-1600-1200.jpg'
  },
  items: {
    Key1: 'Value1',
    Key2: 'Value2',
    Key3: 'Value3',
    'Very very long key': 'Very very long value'
  }
};

export const IconAndLink = Template.bind({});
IconAndLink.args = {
  title: 'Contact Person',
  mainIcon: {
    src: `${ASSETS_URL}/icons/icon_User.svg`
  },
  items: {
    Name: 'Jamie Nazareth',
    Role: 'Admin',
    Email: <a href="mailto:jamie.nazareth@fake.com">Contact Person</a>
  }
};

const cardsData = [
  {
    title: 'Collection',
    mainIcon: {
      src: `${ASSETS_URL}/icons/icon_Billing.svg`
    },
    items: {
      Balance: '$183.9k',
      ARR: '$110.16k',
      'Billing Cycle': 'BI-Annually',
      'First Payment': 'Jul 03, 2019',
      'Next Payment': 'May 02, 2022',
      'Payment Method': 'N/A'
    }
  },
  {
    title: 'Addons',
    mainIcon: {
      src: `${ASSETS_URL}/icons/icon_Dashboard.svg`
    },
    items: {
      'Network Member Enterprise': '$360.00 x 50',
      'Network Gateway Software': '$1,200.00 x 18',
      'Network Gateway Express': '$1,200.00 x 12'
    }
  },
  {
    title: (
      <>
        Coupons <Link href="/see-all">(3)</Link>
        <Link href="/see-all" style={{ float: 'right' }}>
          See All
        </Link>
      </>
    ),
    mainIcon: {
      src: `${ASSETS_URL}/icons/icon_product.svg`
    },
    items: {
      Name: 'Checkoutspecialoffer',
      'Created Date': 'Apr 12, 2020',
      Duration: 'Forever',
      'Apply On': 'Invoice Amount',
      Type: 'Percentage',
      Value: 49
    }
  }
];

const Template2: Story<DictionaryCardProps> = () => (
  <Grid container justifyContent="space-between" alignItems="stretch" spacing={4}>
    {cardsData.map(cardData => (
      <Grid key={`key_${cardData?.title}`} item xs={4}>
        <DictionaryCard {...cardData} />
      </Grid>
    ))}
  </Grid>
);

export const CardsGrid = Template2.bind({});
CardsGrid.args = {};