import { storiesOf } from '@storybook/react-native';
import * as React from 'react';
import { Text, ViewStyle, View } from 'react-native';

import { StoryScreen, Story, UseCase } from '~/storybook/views';
import { color } from '~/theme';

import { DetailsSection } from './details-section';

declare let module;

const CONTAINER: ViewStyle = {
  height: 'auto',
};
const TEXT: ViewStyle = {
  paddingVertical: 20,
};
const DETAIL_SECTION_STYLE: ViewStyle = {
  paddingHorizontal: 10,
  backgroundColor: color.palette.wildSand,
};
const DETAIL_SECTION_HEADER_STYLE: ViewStyle = { backgroundColor: color.palette.wildSand };
const DETAIL_SECTION_DETAILS_STYLE: ViewStyle = { backgroundColor: color.palette.wildSand };
const DummyComponent = () => (
  <Text style={TEXT}>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. In id, amet esse voluptatem illo soluta
    quisquam. Quod nemo omnis voluptate pariatur ullam, delectus quae beatae? Debitis consequatur
    cum voluptate ipsam.
  </Text>
);

storiesOf('DetailsSection', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Style Presets', () => (
    <Story>
      <UseCase text="Default" usage="With icon and title">
        <View style={CONTAINER}></View>
        <DetailsSection icon="clock" titleTx="component.packageDetails.details.title">
          <DummyComponent />
        </DetailsSection>
      </UseCase>
      <UseCase text="Default" usage="With style">
        <View style={CONTAINER}></View>
        <DetailsSection
          icon="clock"
          style={DETAIL_SECTION_STYLE}
          titleTx="component.packageDetails.details.title"
        >
          <DummyComponent />
        </DetailsSection>
      </UseCase>
      <UseCase text="Styled" usage="With header style">
        <View style={CONTAINER}></View>
        <DetailsSection
          headerStyle={DETAIL_SECTION_HEADER_STYLE}
          icon="clock"
          titleTx="component.packageDetails.details.title"
        >
          <DummyComponent />
        </DetailsSection>
      </UseCase>
      <UseCase text="Styled" usage="With details style">
        <View style={CONTAINER}></View>
        <DetailsSection
          detailsStyle={DETAIL_SECTION_DETAILS_STYLE}
          icon="clock"
          titleTx="component.packageDetails.details.title"
        >
          <DummyComponent />
        </DetailsSection>
      </UseCase>
      <UseCase text="Space" usage="With top space">
        <View style={CONTAINER}></View>
        <DetailsSection icon="clock" space="top" titleTx="component.packageDetails.details.title">
          <DummyComponent />
        </DetailsSection>
      </UseCase>
      <UseCase text="Space" usage="With bottom space">
        <View style={CONTAINER}></View>
        <DetailsSection
          icon="clock"
          space="bottom"
          titleTx="component.packageDetails.details.title"
        >
          <DummyComponent />
        </DetailsSection>
      </UseCase>
      <UseCase text="Space" usage="With both spaces">
        <View style={CONTAINER}></View>
        <DetailsSection icon="clock" space="both" titleTx="component.packageDetails.details.title">
          <DummyComponent />
        </DetailsSection>
      </UseCase>
    </Story>
  ))
  .add('Transforming', () => (
    <Story>
      <UseCase text="Capitalize" usage="Capitalize first letter of the sentence">
        <View style={CONTAINER}></View>
        <DetailsSection icon="clock" space="both" title="lorem ipsum" titleTransform="capitalize">
          <DummyComponent />
        </DetailsSection>
      </UseCase>
      <UseCase text="Emphasize" usage="Capitalize first letter of each word">
        <View style={CONTAINER}></View>
        <DetailsSection icon="clock" space="both" title="lorem ipsum" titleTransform="emphasize">
          <DummyComponent />
        </DetailsSection>
      </UseCase>
      <UseCase text="Uppercase" usage="Capitalize the entire text">
        <View style={CONTAINER}></View>
        <DetailsSection icon="clock" space="both" title="lorem ipsum" titleTransform="uppercase">
          <DummyComponent />
        </DetailsSection>
      </UseCase>
    </Story>
  ));
