import { withKnobs } from '@storybook/addon-knobs'
import { storiesOf } from '@storybook/react-native'
import React from 'react'

import { SocialTile } from '../../src/components/SocialTile'

// From ama-backend/src/types/types::ArtistFollower
type AMAArtistFollower = {
  date: string | null
  appleFollowers: number | null
  facebookLikes: number | null
  facebookStorytellers: number | null
  instagramFollowers: number | null
  spotifyPopularity: number | null
  spotifyFollowers: number | null
  twitterFollowers: number | null
  youtubeChannelSubscribers: number | null
  youtubeChannelViews: number | null
}

type DataTypes = 'empty' | 'full' | 'emptyFacebook'

const delphiResponses: Record<DataTypes, AMAArtistFollower> = {
  empty: {
    date: null,
    appleFollowers: null,
    facebookLikes: null,
    facebookStorytellers: null,
    instagramFollowers: null,
    spotifyPopularity: null,
    spotifyFollowers: null,
    twitterFollowers: null,
    youtubeChannelSubscribers: null,
    youtubeChannelViews: null,
  },
  full: {
    date: '2021-04-01',
    appleFollowers: 99321,
    facebookLikes: 432000,
    facebookStorytellers: 99321,
    instagramFollowers: 99321,
    spotifyFollowers: 99321,
    spotifyPopularity: 85,
    twitterFollowers: 99321,
    youtubeChannelSubscribers: 99321,
    youtubeChannelViews: 12345000,
  },
  emptyFacebook: {
    date: '2021-04-01',
    appleFollowers: 99321,
    facebookLikes: null,
    facebookStorytellers: 99321,
    instagramFollowers: 99321,
    spotifyFollowers: 99321,
    spotifyPopularity: 85,
    twitterFollowers: 99321,
    youtubeChannelSubscribers: 99321,
    youtubeChannelViews: 12345000,
  },
}

const facebookArtistId = 'fake-facebook-artist-id'
const twitterArtistId = 'fake-twitter-artist-id'
const instagramArtistId = 'fake-instagram-artist-id'

type SocialProfiles = {
  facebookArtistId: null | string
  instagramArtistId: null | string
  twitterArtistId: null | string
}

const profiles: Record<DataTypes, SocialProfiles> = {
  empty: {
    facebookArtistId: null,
    twitterArtistId: null,
    instagramArtistId: null,
  },
  full: {
    facebookArtistId,
    twitterArtistId,
    instagramArtistId,
  },
  emptyFacebook: {
    facebookArtistId: null,
    twitterArtistId,
    instagramArtistId,
  },
}

storiesOf('SocialTile', module)
  .addDecorator(withKnobs)
  .add('with all data', () => {
    const dataType = 'full'
    const dsp = 'facebook'
    const socialdata = delphiResponses[dataType]
    const current = socialdata.facebookLikes
    const profile = profiles[dataType][`${dsp}ArtistId`]

    return (
      <SocialTile
        dsp={dsp}
        data={{
          yValues: [50, 100, 1000, 999, 800, 725, 900],
          strokeColor: 'white',
        }}
        current={current}
        previous={current ? current * 0.9 : null}
        profile={profile}
        onPress={() => null}
        timeInterval="last28days"
        error={null}
        style={{ minHeight: 362 }}
        title="facebook followers"
      />
    )
  })
  .add('with missing social profile', () => {
    const dataType = 'emptyFacebook'
    const dsp = 'facebook'
    const socialdata = delphiResponses[dataType]
    const current = socialdata.facebookLikes
    const profile = profiles[dataType][`${dsp}ArtistId`]

    return (
      <SocialTile
        dsp={dsp}
        data={{
          yValues: [],
          strokeColor: 'white',
        }}
        current={current}
        previous={null}
        profile={profile}
        onPress={() => null}
        timeInterval="last28days"
        error={null}
        style={{ minHeight: 362 }}
        title="facebook followers"
      />
    )
  })