import { storiesOf } from '@storybook/react-native'
import React from 'react'
import { FlatList } from 'react-native'

import { colors } from '../../src/Colors'
import { ListProductImage } from '../../src/components/ListProductImage'
import { CountryStreamsListItem } from '../../src/components/listitems/CountryStreamsListItem'
import { DateListItem } from '../../src/components/listitems/DateListItem'
import {
  EntityPositionAndChange,
  EntityPositionListItem,
} from '../../src/components/listitems/EntityPositionListItem'
import { ProductListItem } from '../../src/components/listitems/ProductListItem'
import { SelectableListItem } from '../../src/components/listitems/SelectableListItem'
import { StreamsListItem } from '../../src/components/listitems/StreamsListItem'
import { TrackListItem } from '../../src/components/listitems/TrackListItem'
import { TrackListItemFieldsFragment } from '../../src/graphql/__generated__/sdk'
import { productImageFieldsFromProduct } from '../../src/types/graphqlCompatibilityHelpers'

const product = {
  id: '',
  name: 'Product Name',
  image: {
    uri: '',
    width: 0,
    height: 0,
  },
  releaseDate: '2022-03-10',
  productId: '',
  digitalTitleSuppl: null,
  labelId: null,
  labelName: null,
  productVersion: null,
  subTitle: null,
  configKey: '',
  isExplicit: false,
}

const baseTrack: TrackListItemFieldsFragment = {
  id: '',
  isrc: '',
  nameSuppl: 'Track Name Suppl',
  name: 'Track Name',
  product,
  isFavorite: false,
  isExplicit: false,
}

const ListWrapper: React.FC = ({ children }) => (
  <FlatList
    data={[null] /* Dummy, we render children */}
    keyExtractor={(_, index) => index.toString()}
    renderItem={() => <>{children}</>}
  />
)

storiesOf('ListItem', module)
  .addDecorator((story) => <ListWrapper>{story()}</ListWrapper>)
  .add('DateListItem', () => (
    <DateListItem
      track={{ ...baseTrack, isFavorite: true }}
      onPress={() => {}}
    />
  ))
  .add('ProductListItem', () => (
    <ProductListItem product={product} onPress={() => {}} />
  ))
  .add('StreamsListItem', () => (
    <StreamsListItem track={baseTrack} onPress={() => {}} />
  ))
  .add('EntityPositionListItem', () => (
    <EntityPositionListItem
      image={
        <ListProductImage
          product={productImageFieldsFromProduct(product)}
          isExplicit={false}
        />
      }
      name="Name"
      isNew
      style={{
        padding: 12,
        backgroundColor: colors.metals.metal2,
        borderRadius: 8,
        marginBottom: 8,
      }}
      streams={1234}
      extra={
        <EntityPositionAndChange position={{ current: 100, previous: 90 }} />
      }
    />
  ))
  .add('CountryStreamsListItem', () => (
    <CountryStreamsListItem
      item={{
        name: 'Country name',
        streams: { previous: 100, current: 200 },
        maxStreams: 10000,
        selected: false,
      }}
      index={123}
    />
  ))
  .add('TrackListItem', () => <TrackListItem track={baseTrack} />)
  .add('SelectableProductListItem', () => {
    return (
      <>
        <SelectableListItem onChange={() => {}}>
          <TrackListItem track={baseTrack} />
        </SelectableListItem>
        <SelectableListItem selected onChange={() => {}}>
          <TrackListItem track={baseTrack} />
        </SelectableListItem>
      </>
    )
  })