import React, { useState } from 'react';
import { AutoComplete, Input } from 'antd';
import { Redirect } from 'react-router-dom';

import { search, extractArtistInfo, extractTrackInfo } from '../modules/Spotify';
import Cookies from 'js-cookie';
import ReactGA from 'react-ga';

const SearchSeeds = (props) => {
  const [accessToken] = useState(Cookies.get('access_token'));
  const [value, setValue] = useState('');
  const [tracks, setTracks] = useState([]);
  const [artists, setArtists] = useState([]);
  const [playlists, setPlaylists] = useState([]);
  const [seed, setSeed] = useState(null);
  const [playlistSeed, setPlaylistSeed] = useState(null);

  const searchSpotify = async (searchTerm) => {
    if (searchTerm && searchTerm.length > 0) {
      let { artists, tracks, playlists } = await search(accessToken, searchTerm);

      artists = artists.map(extractArtistInfo);
      tracks = tracks.map(extractTrackInfo);
      playlists = playlists.map(extractArtistInfo);

      setArtists(artists);
      setTracks(tracks);
      setPlaylists(playlists);
    }
  };

  const renderTitle = (title) => <span>{title}</span>;

  const renderItem = (item, type) => ({
    key: item.id,
    data: item,
    type,
    value: item.id,
    label: (
      <div>
        <img src={item.image} className="rounded" width="50" height="50" alt="" />
        <span
          style={{
            marginLeft: '1em',
          }}
        >
          {item.name}
        </span>
      </div>
    ),
  });

  const options = [
    ...(!props || !props.addSeed
      ? [
          // Only display playlists on home page
          {
            label: renderTitle('Playlists'),
            options:
              playlists && playlists.length > 0 ? playlists.map((playlists) => renderItem(playlists, 'playlist')) : [],
          },
        ]
      : []),
    {
      label: renderTitle('Tracks'),
      options: tracks && tracks.length > 0 ? tracks.map((track) => renderItem(track, 'track')) : [],
    },
    {
      label: renderTitle('Artists'),
      options: artists && artists.length > 0 ? artists.map((artist) => renderItem(artist, 'artist')) : [],
    },
  ];

  const addSeed = (value, option) => {
    if (props && props.addSeed) {
      // Results page
      ReactGA.event({
        category: 'Seeds',
        action: 'Add seed',
        label: 'Results',
      });

      props.addSeed(option.data, option.type);
      setValue('');
    } else {
      // Home page - Seed search
      ReactGA.event({
        category: 'Seeds',
        action: 'Add seed',
        label: 'Home page',
      });

      if (option.type === 'playlist') {
        ReactGA.event({
          category: 'Seeds',
          action: 'Add playlist',
          label: 'Home page',
        });
        setPlaylistSeed(option.data);
      } else if (option.type === 'track') {
        setSeed({ artists: [], tracks: [option.data] });
      } else {
        setSeed({ artists: [option.data], tracks: [] });
      }
    }
  };

  if (playlistSeed) {
    return (
      <Redirect
        to={{
          pathname: '/results',
          state: {
            playlist: {
              id: playlistSeed.id,
              name: playlistSeed.name,
              image: playlistSeed.image,
            },
          },
        }}
      />
    );
  }

  // For home page. Go to results after seed is added
  if (seed) {
    return (
      <Redirect
        to={{
          pathname: '/results',
          state: { seed },
        }}
      />
    );
  }

  return (
    <div>
      <AutoComplete
        style={{
          marginBottom: '0.5em',
          width: '100%',
          borderRadius: '10px',
        }}
        dropdownClassName="certain-category-search-dropdown"
        options={options}
        value={value}
        onChange={(value) => {
          searchSpotify(value);
          setValue(value);
        }}
        onSelect={addSeed}
      >
        <Input
          style={{
            borderRadius: '10px',
          }}
          size="large"
          placeholder={props.addSeed ? 'Add or remove seeds' : 'Discover based on playlists, songs or artists'}
        />
      </AutoComplete>
    </div>
  );
};

export default SearchSeeds;