import React from 'react';
import { storiesOf } from '@storybook/react';
import { TripCards } from './index';
import styled from 'styled-components';
import { defaultTripCardImgHeight } from './helpers';

const spacing = (multiplier: number) => `${multiplier * 8}px`;

const breakpoints = {
  medium: 768,
  wide: 1024
};

const InteractiveContainer = styled.div`
  position: relative;
  margin-bottom: ${spacing(4)};
  padding: 0 ${spacing(2)};

  @media (min-width: ${breakpoints.medium}px) {
    width: 80.8%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }

  @media (min-width: ${breakpoints.wide}px) {
    width: 56.2%;
  }
`;

storiesOf('Typescript Component/TripCards', module)
  .add('Channel View Two Cards', () => (
    <TripCards
      element={{
        class: 'trip-cards',
        tripcards: btoa(JSON.stringify([2074350, 2140335])),
        title: 'Similar cruises',
        titleurl: 'https://www.thetimes.com/travel/holidays',
        description: 'Brought to you by Times Holidays'
      }}
      useMockData={true}
      maxWidthItemConfig={{
        xs: '85%',
        mobile: '87%',
        tablet: '44%',
        desktop: '314px',
        xl: '368px'
      }}
      widthContainerConfig={{
        tablet: '728px',
        desktop: '984px',
        xl: '1144px'
      }}
    />
  ))
  .add('Channel View Three Cards', () => (
    <TripCards
      element={{
        class: 'trip-cards',
        tripcards: btoa(JSON.stringify([2074350, 2140335, 2177685])),
        title: 'Featured Voyages',
        titleurl: 'https://www.thetimes.com/travel/holidays',
        description: 'Handpicked by our travel experts'
      }}
      forceStaticGrid={true}
      maxWidthItemConfig={{
        xs: '85%',
        mobile: '87%',
        tablet: '44%',
        desktop: '314px',
        xl: '368px'
      }}
      widthContainerConfig={{
        tablet: '728px',
        desktop: '984px',
        xl: '1144px'
      }}
      useMockData={true}
    />
  ))
  .add('Article View Two Trip Cards', () => (
    <InteractiveContainer>
      <TripCards
        element={{
          class: 'trip-cards',
          tripcards: btoa(JSON.stringify([2074350, 2140335])),
          title: 'Similar cruises',
          titleurl: 'https://www.thetimes.com/travel/holidays',
          description: 'Brought to you by Times Holidays'
        }}
        useMockData={true}
        maxWidthItemConfig={{
          mobile: '320px',
          tablet: '260px',
          desktop: '260px',
          xl: '300px'
        }}
        widthContainerConfig={{
          mobile: '390px',
          tablet: '620px',
          desktop: '574px',
          xl: '663px'
        }}
        imgHeight={defaultTripCardImgHeight}
      />
    </InteractiveContainer>
  ))
  .add('Article View Three Cards', () => (
    <InteractiveContainer>
      <TripCards
        element={{
          class: 'trip-cards',
          tripcards: btoa(JSON.stringify([2074350, 2140335, 2177685])),
          title: 'Similar cruises',
          titleurl: 'https://www.thetimes.com/travel/holidays',
          description: 'Brought to you by Times Holidays'
        }}
        useMockData={true}
        maxWidthItemConfig={{
          mobile: '320px',
          tablet: '260px',
          desktop: '260px',
          xl: '300px'
        }}
        widthContainerConfig={{
          mobile: '390px',
          tablet: '620px',
          desktop: '574px',
          xl: '663px'
        }}
        imgHeight={{ ...defaultTripCardImgHeight, $heightXs: '100%' }}
      />
    </InteractiveContainer>
  ))
  .add('Article View Two Trip Cards', () => (
    <InteractiveContainer>
      <TripCards
        element={{
          class: 'trip-cards',
          tripcards: btoa(JSON.stringify([2074350, 2140335])),
          title: 'Similar cruises',
          titleurl: 'https://www.thetimes.com/travel/holidays',
          description: 'Brought to you by Times Holidays'
        }}
        useMockData={true}
        maxWidthItemConfig={{
          mobile: '320px',
          tablet: '260px',
          desktop: '260px',
          xl: '300px'
        }}
        widthContainerConfig={{
          mobile: '390px',
          tablet: '620px',
          desktop: '574px',
          xl: '663px'
        }}
        imgHeight={defaultTripCardImgHeight}
      />
    </InteractiveContainer>
  ))
  .add('Article View Trip Cards', () => (
    <InteractiveContainer>
      <TripCards
        element={{
          class: 'trip-cards',
          tripcards: btoa(JSON.stringify([2074350, 2140335, 2177685])),
          title: 'Similar cruises',
          titleurl: 'https://www.thetimes.com/travel/holidays',
          description: 'Brought to you by Times Holidays'
        }}
        useMockData={true}
        maxWidthItemConfig={{
          mobile: '320px',
          tablet: '260px',
          desktop: '260px',
          xl: '300px'
        }}
        widthContainerConfig={{
          mobile: '390px',
          tablet: '620px',
          desktop: '574px',
          xl: '663px'
        }}
        imgHeight={defaultTripCardImgHeight}
      />
    </InteractiveContainer>
  ))
  .add('Article View Six Cards', () => (
    <InteractiveContainer>
      <TripCards
        element={{
          class: 'trip-cards',
          tripcards: btoa(
            JSON.stringify([
              2074350,
              2140335,
              2177685,
              2074351,
              2140336,
              2177686
            ])
          ),
          title: 'Similar cruises',
          titleurl: 'https://www.thetimes.com/travel/holidays',
          description: 'Brought to you by Times Holidays'
        }}
        useMockData={true}
        maxWidthItemConfig={{
          mobile: '320px',
          tablet: '260px',
          desktop: '260px',
          xl: '300px'
        }}
        widthContainerConfig={{
          mobile: '390px',
          tablet: '620px',
          desktop: '574px',
          xl: '663px'
        }}
        imgHeight={defaultTripCardImgHeight}
      />
    </InteractiveContainer>
  ));