import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, boolean, text } from '@storybook/addon-knobs';

import {
  OptaMatchStatsWinProbability,
  WinProbabilityFeed
} from './OptaMatchStatsWinProbability';

const DEFAULT_API_BASE_URL = '/api/match-stats';
const DEFAULT_MATCH_ID = '2562165';

const preMatchFeed: WinProbabilityFeed = {
  matchInfo: {
    id: 'match-1',
    description: 'Arsenal vs Chelsea',
    contestant: [
      {
        id: 'team-home',
        name: 'Arsenal',
        shortName: 'Arsenal',
        officialName: 'Arsenal FC',
        code: 'ARS',
        position: 'home'
      },
      {
        id: 'team-away',
        name: 'Chelsea',
        shortName: 'Chelsea',
        officialName: 'Chelsea FC',
        code: 'CHE',
        position: 'away'
      }
    ]
  },
  liveData: {
    matchDetails: { matchStatus: 'Fixture' },
    preMatchPredictions: [
      {
        type: 'Win',
        prediction: [
          { type: 'Home', probability: '59.622' },
          { type: 'Away', probability: '19.263' },
          { type: 'Draw', probability: '21.115' }
        ]
      }
    ]
  }
};

const liveFeed: WinProbabilityFeed = {
  matchInfo: {
    id: 'match-1',
    description: 'Arsenal vs Chelsea',
    contestant: [
      {
        id: 'team-home',
        name: 'Arsenal',
        shortName: 'Arsenal',
        officialName: 'Arsenal FC',
        code: 'ARS',
        position: 'home'
      },
      {
        id: 'team-away',
        name: 'Chelsea',
        shortName: 'Chelsea',
        officialName: 'Chelsea FC',
        code: 'CHE',
        position: 'away'
      }
    ]
  },
  liveData: {
    matchDetails: { matchStatus: 'Playing', periodId: 1 },
    overallLivePredictions: [
      {
        type: 'Win',
        prediction: [
          { type: 'Home', probability: '46.036' },
          { type: 'Draw', probability: '16.150' },
          { type: 'Away', probability: '37.814' }
        ]
      }
    ]
  }
};

storiesOf(
  'Typescript Component/Opta Match Stats/Football/Win Probability',
  module
)
  .addDecorator(withKnobs)
  .add('Pre-match (static feed)', () => {
    const isApp = boolean('isApp', false);
    return (
      <div style={{ maxWidth: 600, margin: '0 auto' }}>
        <OptaMatchStatsWinProbability feed={preMatchFeed} isApp={isApp} />
      </div>
    );
  })
  .add('Live match (static feed)', () => {
    const isApp = boolean('isApp', false);
    return (
      <div style={{ maxWidth: 600, margin: '0 auto' }}>
        <OptaMatchStatsWinProbability feed={liveFeed} isApp={isApp} />
      </div>
    );
  })
  .add('Fetch by match', () => {
    const match = text('Match ID', DEFAULT_MATCH_ID);
    const apiBaseUrl = text('API Base URL', DEFAULT_API_BASE_URL);
    const isApp = boolean('isApp', true);

    return (
      <div style={{ maxWidth: 600, margin: '0 auto' }}>
        <OptaMatchStatsWinProbability
          match={match}
          apiBaseUrl={apiBaseUrl}
          isApp={isApp}
        />
      </div>
    );
  });