import { storiesOf } from '@storybook/react-native'
import { times } from 'lodash'
import React, { useState } from 'react'
import { RefreshControl, View } from 'react-native'

import { Button } from '../../src/components/Button'
import { TrackComparisonSelectionModal } from '../../src/components/TrackComparisonSelectionModal'
import { ArtistContext } from '../../src/contexts/ArtistContext'
import { UserContext } from '../../src/contexts/UserContext'
import { Artist } from '../../src/types/Artist'
import { Product } from '../../src/types/Product'
import { Track } from '../../src/types/Track'
import { User } from '../../src/user'

const product: Product = {
  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 generateTrack = (idx: number): Track => ({
  sonyTrackId: `GRAS_${idx}`,
  isrc: `GRAS_${idx}A`,
  trackNameSuppl: 'Track Name Suppl',
  name: `Track Name ${idx}`,
  product,
  isFavorite: false,
  lyricsVersion: 'lyrics',
  releaseDate: null,
})

const user: User = {
  id: '1234567890',
} as User

const artist: Artist = {
  sonyArtistId: 'GRAS_1234',
} as Artist

const tracks: Track[] = times(20, (idx) => generateTrack(idx + 1))

storiesOf('TrackComparisonSelectionModal', module)
  .addDecorator((story) => (
    <UserContext.Provider value={user}>
      <ArtistContext.Provider value={artist}>{story()}</ArtistContext.Provider>
    </UserContext.Provider>
  ))
  .add('with all tracks', () =>
    React.createElement(() => {
      const [open, setOpen] = useState(false)

      return (
        <View style={{ padding: 16 }}>
          <Button onPress={() => setOpen(true)}>Open Track comparison</Button>
          <TrackComparisonSelectionModal
            tracks={tracks}
            open={open}
            onCompare={() => {}}
            onClose={() => setOpen(false)}
            error={null}
            refreshControl={<RefreshControl refreshing={false} />}
          />
        </View>
      )
    })
  )
  .add('with initially selected tracks', () =>
    React.createElement(() => {
      const [open, setOpen] = useState(false)

      return (
        <View style={{ padding: 16 }}>
          <Button onPress={() => setOpen(true)}>Open Track comparison</Button>
          <TrackComparisonSelectionModal
            tracks={tracks}
            initialSelectedTracks={tracks.slice(0, 5)}
            open={open}
            onCompare={() => {}}
            onClose={() => setOpen(false)}
            error={null}
            refreshControl={<RefreshControl refreshing={false} />}
          />
        </View>
      )
    })
  )
  .add('with just a few tracks', () =>
    React.createElement(() => {
      const [open, setOpen] = useState(false)

      return (
        <View style={{ padding: 16 }}>
          <Button onPress={() => setOpen(true)}>Open Track comparison</Button>
          <TrackComparisonSelectionModal
            tracks={tracks.slice(0, 5)}
            open={open}
            onCompare={() => {}}
            onClose={() => setOpen(false)}
            error={null}
            refreshControl={<RefreshControl refreshing={false} />}
          />
        </View>
      )
    })
  )
  .add('with all tracks selected', () =>
    React.createElement(() => {
      const [open, setOpen] = useState(false)

      return (
        <View style={{ padding: 16 }}>
          <Button onPress={() => setOpen(true)}>Open Track comparison</Button>
          <TrackComparisonSelectionModal
            tracks={tracks.slice(0, 5)}
            initialSelectedTracks={tracks.slice(0, 5)}
            open={open}
            onCompare={() => {}}
            onClose={() => setOpen(false)}
            error={null}
            refreshControl={<RefreshControl refreshing={false} />}
          />
        </View>
      )
    })
  )
  .add('with no tracks', () =>
    React.createElement(() => {
      const [open, setOpen] = useState(false)

      return (
        <View style={{ padding: 16 }}>
          <Button onPress={() => setOpen(true)}>Open Track comparison</Button>
          <TrackComparisonSelectionModal
            tracks={[]}
            open={open}
            onCompare={() => {}}
            onClose={() => setOpen(false)}
            error={null}
            refreshControl={<RefreshControl refreshing={false} />}
          />
        </View>
      )
    })
  )
  .add('loading tracks', () =>
    React.createElement(() => {
      const [open, setOpen] = useState(false)

      return (
        <View style={{ padding: 16 }}>
          <Button onPress={() => setOpen(true)}>Open Track comparison</Button>
          <TrackComparisonSelectionModal
            open={open}
            onCompare={() => {}}
            onClose={() => setOpen(false)}
            error={null}
            refreshControl={<RefreshControl refreshing={false} />}
          />
        </View>
      )
    })
  )
  .add('error loading tracks', () =>
    React.createElement(() => {
      const [open, setOpen] = useState(false)

      return (
        <View style={{ padding: 16 }}>
          <Button onPress={() => setOpen(true)}>Open Track comparison</Button>
          <TrackComparisonSelectionModal
            open={open}
            onCompare={() => {}}
            onClose={() => setOpen(false)}
            error={{
              type: 'service',
              eventId: '123456789',
              status: 500,
            }}
            refreshControl={<RefreshControl refreshing={false} />}
          />
        </View>
      )
    })
  )