import React from 'react';
import { Meta, Story } from '@storybook/react';
import { OrganismCardClickable } from 'native/organisms/CardClickable';
import { ICardClickable } from 'native/organisms/CardClickable/CardTypes';
import { action } from '@storybook/addon-actions';
import { Linking } from 'react-native';

const meta: Meta = {
  title: 'React Native/organisms/CardClickable',
  component: OrganismCardClickable,
  argTypes: {
    handleClick: {
      table: {
        disable:true
      }
    }
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const TemplateCardClickable: Story<ICardClickable> = (props) => <OrganismCardClickable {...props} />;

export const CardClickable = TemplateCardClickable.bind({});

CardClickable.args = {
  type: 'vertical',
  title: 'Michelob Ultra Special Cooler',
  description: 'Michelob Ultra',
  image: 'https://www.sram.com/globalassets/image-hierarchy/sram-product-root-images/rotors/rotors/rt-centerline-x-a1/dbrotorclx160.jpg?w=800&quality=80&format=jpg',
  points: '4500 points',
  handleClick: () => alert('This is the card action'),
  category: 'Merchandise'
};

const TemplateCardClickableRedirect: Story<ICardClickable> = (props) => <OrganismCardClickable {...props} />;

export const CardClickableRedirect = TemplateCardClickableRedirect.bind({});

CardClickableRedirect.args = {
  type: 'vertical',
  title: 'Michelob Ultra Special Cooler',
  description: 'Michelob Ultra',
  image: 'https://www.sram.com/globalassets/image-hierarchy/sram-product-root-images/rotors/rotors/rt-centerline-x-a1/dbrotorclx160.jpg?w=800&quality=80&format=jpg',
  points: '4500 points',
  handleClick: () => Linking.openURL('https://www.sram.com/globalassets/image-hierarchy/sram-product-root-images/rotors/rotors/rt-centerline-x-a1/dbrotorclx160.jpg?w=800&quality=80&format=jpg'),
  category: 'Merchandise'
};