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

import { StreamingDsp, streamingDsps } from '../../src/Consts'
import { DemographicsTile } from '../../src/components/DemographicsTile'
import {
  DspId,
  DspDemographicsFieldsFragment,
  Gender,
} from '../../src/graphql/__generated__/sdk'
import { NetworkError } from '../../src/hooks/useNetwork'
import { allTimeIntervals, TimeInterval } from '../../src/types/TimeInterval'

const dsp = DspId.Spotify
const demographics: DspDemographicsFieldsFragment = {
  dsp: {
    id: dsp,
  },
  ageBands: [
    {
      gender: Gender.Female,
      ageRange: {
        start: 0,
        end: 17,
      },
      percentage: 1.014639,
    },
    {
      gender: Gender.Female,
      ageRange: {
        start: 18,
        end: 22,
      },
      percentage: 2.910655,
    },
    {
      gender: Gender.Female,
      ageRange: {
        start: 23,
        end: 27,
      },
      percentage: 1.456491,
    },
    {
      gender: Gender.Female,
      ageRange: {
        start: 28,
        end: 34,
      },
      percentage: 8.70792,
    },
    {
      gender: Gender.Female,
      ageRange: {
        start: 35,
        end: 44,
      },
      percentage: 5.8791,
    },
    {
      gender: Gender.Female,
      ageRange: {
        start: 45,
        end: 59,
      },
      percentage: 3.75309,
    },
    {
      gender: Gender.Female,
      ageRange: {
        start: 60,
        end: 150,
      },
      percentage: 6.4029,
    },
    {
      gender: Gender.Female,
      ageRange: null,
      percentage: 3.063,
    },
    {
      gender: Gender.Male,
      ageRange: {
        start: 0,
        end: 17,
      },
      percentage: 7.20319,
    },
    {
      gender: Gender.Male,
      ageRange: {
        start: 18,
        end: 22,
      },
      percentage: 2.802568,
    },
    {
      gender: Gender.Male,
      ageRange: {
        start: 23,
        end: 27,
      },
      percentage: 1.997995,
    },
    {
      gender: Gender.Male,
      ageRange: {
        start: 28,
        end: 34,
      },
      percentage: 1.52697,
    },
    {
      gender: Gender.Male,
      ageRange: {
        start: 35,
        end: 44,
      },
      percentage: 8.30869,
    },
    {
      gender: Gender.Male,
      ageRange: {
        start: 45,
        end: 59,
      },
      percentage: 4.89236,
    },
    {
      gender: Gender.Male,
      ageRange: {
        start: 60,
        end: 150,
      },
      percentage: 9.5315,
    },
    {
      gender: Gender.Male,
      ageRange: null,
      percentage: 4.085,
    },
    {
      gender: Gender.Neutral,
      ageRange: {
        start: 0,
        end: 17,
      },
      percentage: 4.5977,
    },
    {
      gender: Gender.Neutral,
      ageRange: {
        start: 18,
        end: 22,
      },
      percentage: 1.323,
    },
    {
      gender: Gender.Neutral,
      ageRange: {
        start: 23,
        end: 27,
      },
      percentage: 4.6772,
    },
    {
      gender: Gender.Neutral,
      ageRange: {
        start: 28,
        end: 34,
      },
      percentage: 4.6787,
    },
    {
      gender: Gender.Neutral,
      ageRange: {
        start: 35,
        end: 44,
      },
      percentage: 2.9754,
    },
    {
      gender: Gender.Neutral,
      ageRange: {
        start: 45,
        end: 59,
      },
      percentage: 1.5624,
    },
    {
      gender: Gender.Neutral,
      ageRange: {
        start: 60,
        end: 150,
      },
      percentage: 8.209,
    },
    {
      gender: Gender.Neutral,
      ageRange: null,
      percentage: 2.3,
    },
    {
      gender: Gender.Unknown,
      ageRange: {
        start: 0,
        end: 17,
      },
      percentage: 3.1375,
    },
    {
      gender: Gender.Unknown,
      ageRange: {
        start: 18,
        end: 22,
      },
      percentage: 8.6415,
    },
    {
      gender: Gender.Unknown,
      ageRange: {
        start: 23,
        end: 27,
      },
      percentage: 6.3055,
    },
    {
      gender: Gender.Unknown,
      ageRange: {
        start: 28,
        end: 34,
      },
      percentage: 5.0336,
    },
    {
      gender: Gender.Unknown,
      ageRange: {
        start: 35,
        end: 44,
      },
      percentage: 3.1425,
    },
    {
      gender: Gender.Unknown,
      ageRange: {
        start: 45,
        end: 59,
      },
      percentage: 1.181,
    },
    {
      gender: Gender.Unknown,
      ageRange: {
        start: 60,
        end: 150,
      },
      percentage: 2.781,
    },
    {
      gender: Gender.Unknown,
      ageRange: null,
      percentage: 1.1059,
    },
  ],
}

const zeroTotalDemographics: DspDemographicsFieldsFragment = {
  dsp: {
    id: dsp,
  },
  ageBands: [
    {
      gender: Gender.Female,
      ageRange: {
        start: 0,
        end: 17,
      },
      percentage: 0,
    },
    {
      gender: Gender.Male,
      ageRange: {
        start: 0,
        end: 17,
      },
      percentage: 0,
    },
  ],
}

storiesOf('DemograhicsTile', module)
  .addDecorator(withKnobs)
  .add('with all data', () => {
    return (
      <DemographicsTile
        dsp={dsp}
        timeInterval="last28days"
        demographics={demographics}
        error={null}
        style={{ minHeight: 412 }}
      />
    )
  })
  .add('with loading data', () => (
    <DemographicsTile
      dsp={dsp}
      timeInterval="last28days"
      demographics={undefined}
      error={null}
      style={{ minHeight: 412 }}
    />
  ))
  .add('with total zero data', () => (
    <DemographicsTile
      dsp={dsp}
      timeInterval="last28days"
      demographics={zeroTotalDemographics}
      error={null}
      style={{ minHeight: 412 }}
    />
  ))
  .add('with missing data', () => (
    <DemographicsTile
      dsp={dsp}
      timeInterval="last28days"
      demographics={undefined}
      error={null}
      style={{ minHeight: 412 }}
    />
  ))
  .add('with error loading data', () => (
    <DemographicsTile
      dsp={dsp}
      timeInterval="last28days"
      demographics={undefined}
      error={{ type: 'app' }}
      style={{ minHeight: 412 }}
    />
  ))
  .add('playground', () => {
    const dspKnob: StreamingDsp = radios(
      'DSP',
      streamingDsps.reduce((dsps, dsp) => ({ ...dsps, [dsp]: dsp }), {}),
      dsp
    )

    const timeIntervalKnob: TimeInterval = radios(
      'Time interval',
      allTimeIntervals.reduce(
        (timeIntervals, timeInterval) => ({
          ...timeIntervals,
          [timeInterval]: timeInterval,
        }),
        {}
      ),
      'last28days'
    )

    const dataKnob = radios(
      'Demographics data',
      {
        loading: 'loading',
        'error getting': 'error',
        missing: 'missing',
        'zero streams': 'zero',
        'has data': 'has-data',
      },
      'has-data'
    )

    function getDemographicsData() {
      if (dataKnob === 'loading') {
        return undefined
      }

      if (dataKnob === 'error') {
        return undefined
      }

      if (dataKnob === 'missing') {
        return undefined
      }

      if (dataKnob === 'zero') {
        return zeroTotalDemographics
      }

      return demographics
    }

    const tileHeightKnob = number('Tile height', 412)

    return (
      <DemographicsTile
        dsp={dspKnob}
        timeInterval={timeIntervalKnob}
        demographics={getDemographicsData()}
        error={dataKnob === 'error' ? ({ type: 'app' } as NetworkError) : null}
        style={{ minHeight: tileHeightKnob }}
      />
    )
  })