/* eslint-disable jsx-a11y/anchor-is-valid */

import React, {Fragment} from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Layout from "../components/templates/Layout"
import { Typography } from '@material-ui/core';
import Button from '@material-ui/core/Button';
import Router from 'next/router'
import { connect } from 'react-redux'
import Loader from './../components/templates/loader'
import { isEmpty } from "lodash"
import NoResult from './../components/atoms/NoResult';
import Head from 'next/head'
import dynamic from 'next/dynamic'
import OgHead from '../components/atoms/OgHead';
import getConfig from 'next/config'

import Autosuggest from 'react-autosuggest';

// const VideoSlider = dynamic(() => import('../components/organisms/ShortVideoHooker'), {
//   ssr: false
// });
const HorizontalScroller = dynamic(() => import('../components/organisms/HorizontalScroller'), {
  ssr: false
});

const TileCompany = dynamic(() => import('../components/organisms/TileCompany'), {
  ssr: false
});

const TileOffre = dynamic(() => import('../components/organisms/TileOffre'), {
  ssr: false
});

const Footer = dynamic(() => import('../components/organisms/Footer'), {
  ssr: false
});
const { publicRuntimeConfig } = getConfig();
const styles = theme => ({
  root: {
    position: 'relative',
    textAlign: 'center',
    paddingTop: theme.spacing(20),
    justifyContent: 'center',
  },
  primary: {
    color: theme.palette.primary.main,
  },
  container: {
    display: 'flex',
    flexDirection: 'column',
  },
  scrollerSection: {
    display: 'flex',
    flexDirection: 'column',
    paddingBottom: theme.spacing(6),
    '&>div': {
      paddingBottom: theme.spacing(3),
    },
    [theme.breakpoints.up('md')]: {
      padding: theme.spacing(2, 10),
      paddingBottom: theme.spacing(9),
    },
    [theme.breakpoints.up('lg')]: {
      padding: theme.spacing(2, 30),
      paddingBottom: theme.spacing(9),
    },
    [theme.breakpoints.up('xl')]: {
      padding: theme.spacing(2, 55),
    },
  },
  scrollerSectionOffer: {
    backgroundColor: theme.palette.secondary.main,
  },
  scrollerSectionCompany: {
    backgroundColor: theme.palette.background.grey,
  },
  card: {
    margin: theme.spacing(1),
    width: '96%',
    height: '100%',
    maxWidth: '640px',
    maxheight: '360px',

  },
  HorizontalScroller: {
    marginTop: theme.spacing(1),
    marginBottom: theme.spacing(4),
  },
  paper: {
    margin: theme.spacing(1),
    width: '96%',
    height: '100%',
  },
  media: {
  },
  svg: {
    width: 100,
    height: 100,
  },
  polygon: {
    fill: theme.palette.common.white,
    stroke: theme.palette.divider,
    strokeWidth: 4,
  },
  img: {
    maxWidth: '100%',

  },
  titleContainer: {
    marginTop: theme.spacing(4),
    marginBottom: theme.spacing(3),
  },
  beforeTitle: {
    fontSize: '0.8em',
    fontWeight: '300',
    textAlign: 'center',
    textTransform: 'uppercase',
    color: theme.palette.secondary.text,
  },
  title: {
    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
    fontSize: '1.5em',
    fontWeight: '600',
    textAlign: 'center',
  },
  white: {
    color: theme.palette.common.white
  },
  button: {
    textTransform: 'inherit',
    margin: theme.spacing(0, 8),
    padding: theme.spacing(1.2, 2),
    [theme.breakpoints.up('sm')]: {
      margin: 'auto',
    },
  },
});

class Index extends React.Component {
  constructor() {
    super();

    //Define state for value and suggestion collection
    this.state = {
        value: '',
        suggestions: [],
        valueMetier: '',
        suggestionsMetier: [],
        valueMetierCompetence: '',
        suggestionsMetierCompetence: [],
    };
  }

  componentDidMount() {
    localStorage.setItem("loginRedirect", "/")
    
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    this.setState({
      
    })
  }

  // Filter logic
  getSuggestions = async (value) => {
    const inputValue = value.trim().toLowerCase();
    let response = await fetch(publicRuntimeConfig.symphonyUrl+"/api/getCompetences?q=" + inputValue );
    // let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
    let data = await response.json()
    return data;
  };

  // Trigger suggestions
  getSuggestionValue = suggestion => suggestion.libelle;
  // Render Each Option
  renderSuggestion = suggestion => (
      <span className="sugg-option">
          
          <span className="name">
              {suggestion.libelle} ({suggestion.code})
          </span>
      </span>
  );

  // OnChange event handler
  onChange = (event, { newValue }) => {
      this.setState({
          value: newValue
      });
  };

  // Suggestion rerender when user types
  onSuggestionsFetchRequested = ({ value }) => {
      this.getSuggestions(value)
          .then(data => {
              if (data.Error) {
                  this.setState({
                      suggestions: []
                  });
              } else {
                  this.setState({
                      suggestions: data
                  });
              }
          })
  };

  // Triggered on clear
  onSuggestionsClearRequested = () => {
      this.setState({
          suggestions: []
      });
  };


  // METIER
  // Filter logic
  getSuggestionsMetier = async (valueMetier) => {
    const inputValue = valueMetier.trim().toLowerCase();
    let response = await fetch(publicRuntimeConfig.symphonyUrl+"api/getAppelationsLibelle?q=" + inputValue );
    // let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
    let data = await response.json()
    return data;
  };

  // Trigger suggestions
  getSuggestionMetierValue = suggestion => suggestion.libelle;
  // Render Each Option
  renderSuggestionMetier = suggestion => (
      <span className="sugg-option">
          
          <span className="name">
              {suggestion.libelle} ({suggestion.code})
          </span>
      </span>
  );

  // OnChange event handler
  onChangeMetier = (event, { newValue }) => {
      this.setState({
          valueMetier: newValue
      });
  };

  // Suggestion rerender when user types
  onSuggestionsMetierFetchRequested = ({ value }) => {
      this.getSuggestionsMetier(value)
          .then(data => {
              if (data.Error) {
                  this.setState({
                      suggestionsMetier: []
                  });
              } else {
                  this.setState({
                      suggestionsMetier: data
                  });
              }
          })
  };

  // Triggered on clear
  onSuggestionsMetierClearRequested = () => {
      this.setState({
          suggestionsMetier: []
      });
  };


  // METIER COMPETENCE
  // Filter logic
  getSuggestionsMetierCompetence = async (valueMetierCompetence) => {
    const inputValue = valueMetierCompetence.trim().toLowerCase();
    let response = await fetch(publicRuntimeConfig.symphonyUrl+"api/getDetailAppelation?q=" + inputValue );
    // let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
    let data = await response.json()
    return data.competencesDeBase;
  };

  // Trigger suggestions
  getSuggestionMetierCompetenceValue = suggestion => suggestion.libelle;
  // Render Each Option
  renderSuggestionMetierCompetence = suggestion => (
      <span className="sugg-option">
          
          <span className="name">
              {suggestion.libelle} ({suggestion.code})
          </span>
      </span>
  );

  // OnChange event handler
  onChangeMetierCompetence = (event, { newValue }) => {
      this.setState({
          valueMetierCompetence: newValue
      });
  };

  // Suggestion rerender when user types
  onSuggestionsMetierCompetenceFetchRequested = ({ value }) => {
      this.getSuggestionsMetierCompetence(value)
          .then(data => {
              if (data.Error) {
                  this.setState({
                      suggestionsMetierCompetence: []
                  });
              } else {
                  this.setState({
                      suggestionsMetierCompetence: data
                  });
              }
          })
  };

  // Triggered on clear
  onSuggestionsMetierCompetenceClearRequested = () => {
      this.setState({
          suggestionsMetierCompetence: []
      });
  };



  render() {
    const { classes } = this.props;
    const { value, suggestions, valueMetier, suggestionsMetier, valueMetierCompetence, suggestionsMetierCompetence } = this.state;
    // Option props
    const inputProps = {
      placeholder: 'Saisir une compétence',
      value,
      onChange: this.onChange
    };

    const inputPropsMetier = {
      placeholder: 'Saisir un métier',
      value:valueMetier,
      onChange: this.onChangeMetier
    };

    const inputPropsMetierCompetence = {
      placeholder: 'Saisir un id appellation',
      value:valueMetierCompetence,
      onChange: this.onChangeMetierCompetence
    };
    const socialShareUrl = typeof window !== 'undefined' ? window.location
            : publicRuntimeConfig.frontServerUrl ;
    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
    const imgUrl =  DefaultUrl
    return (
      <Layout>
        <Head>
          <title key="title">Recrutement vidéo : fonctionnement – Talents Tube</title>
          <meta key="robots" name="robots" content="noindex, nofollow"></meta>
        </Head>
        <div className={classes.container}>

          {/* <VideoSlider /> */}

          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionOffer}>
            

            
            <Autosuggest
                suggestions={suggestions}
                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                getSuggestionValue={this.getSuggestionValue}
                renderSuggestion={this.renderSuggestion}
                inputProps={inputProps}
            />
            <Autosuggest
                suggestions={suggestionsMetier}
                onSuggestionsFetchRequested={this.onSuggestionsMetierFetchRequested}
                onSuggestionsClearRequested={this.onSuggestionsMetierClearRequested}
                getSuggestionValue={this.getSuggestionMetierValue}
                renderSuggestion={this.renderSuggestionMetier}
                inputProps={inputPropsMetier}
            />

            <Autosuggest
                suggestions={suggestionsMetierCompetence}
                onSuggestionsFetchRequested={this.onSuggestionsMetierCompetenceFetchRequested}
                onSuggestionsClearRequested={this.onSuggestionsMetierCompetenceClearRequested}
                getSuggestionValue={this.getSuggestionMetierCompetenceValue}
                renderSuggestion={this.renderSuggestionMetierCompetence}
                inputProps={inputPropsMetierCompetence}
            />
          </section>

          
          <Footer />
        </div>
      </Layout>
    );
  }
}

function mapStateToProps(state) {
  return {
    
  };
}

Index.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default (connect(mapStateToProps, { })(withStyles(styles)(Index)));
