text: import { h, Component } from 'preact';
  import style from './style';
  import Header from '../../components/header';
  import DropDown from '../../components/dropdown';
  import { Link } from 'preact-router/match';
  import { setDocumentMetaTags } from '../../utils/misc';
  
  export default class Settings extends Component {
    constructor(props) {
      super(props);
      this.state = {
        docTitle: 'Instellingen',
        docDescription: 'Verander de instellingen op Radiostations.be',
        themeOptions: [
          { text: 'Default', value: 'default' },
          { text: 'Licht', value: 'light' },
          { text: 'Donker', value: 'dark' },
        ],
      };
    }
  
    componentDidMount() {
      setDocumentMetaTags(this.state.docTitle, this.state.docDescription);
    }
  
    themeOptionChanged = (optionValue) => {
      this.callSaveSettings(optionValue);
    };
  
    formatExportLink = () => {
      let stationArr = [];
      if (this.props.stationList) {
        for (let i = 0; i < this.props.stationList.length; i++) {
          stationArr.push(this.props.stationList[i].id);
        }
      }
      let podcastArr = [];
      if (this.props.podcastList) {
        let maxItemCount = Math.min(this.props.podcastList.length, 5);
        for (let i = 0; i < maxItemCount; i++) {
          podcastArr.push(this.props.podcastList[i].feedUrl);
        }
      }
      return window.location.origin + '/settings/?stations=' + stationArr.join(',') + '&podcasts=' + podcastArr.join(',');
    };
  
    enablePodcastindexSearch = (ev) => {
      this.setPodcastindexSearch(true);
      ev.preventDefault();
    };
    disablePodcastindexSearch = (ev) => {
      this.setPodcastindexSearch(false);
      ev.preventDefault();
    };
  
    enableChromecastSupport = (ev) => {
      this.setChromecastSupport(true);
      ev.preventDefault();
    };
    disableChromecastSupport = (ev) => {  
      this.setChromecastSupport(false);
      ev.preventDefault();
    };
  
    setPodcastindexSearch = (enable) => {
      this.callSaveSettings(null, null, enable);
    };
  
    setChromecastSupport = (enable) => {
      this.callSaveSettings(null, enable);
    };
  
    callSaveSettings = (themeValue, enableChromecastValue, enablePodcastindexSearchValue) => {
      let themeOption = this.state.themeOptions[0];
      if (this.props.settings && this.props.settings.theme) {
        themeOption = this.props.settings.theme;
      }
      if (themeValue) {
        document.body.setAttribute('data-theme', themeValue);
        themeOption = themeValue;
      }
      let enableChromecast =
        enableChromecastValue || (typeof enableChromecastValue !== 'boolean' && this.props.settings && this.props.settings.experimental && this.props.settings.experimental.chromecast);
      let enablePodcastindex =
        enablePodcastindexSearchValue || (typeof enablePodcastindexSearchValue !== 'boolean' && this.props.settings && this.props.settings.experimental && this.props.settings.experimental.podcastindex);
      let settings = {
        theme: themeOption,
        experimental: {
          chromecast: enableChromecast,
          podcastindex: enablePodcastindex,
        },
      };
      this.props.saveSettings(settings);
    };
  
    resetLocalPreferences = () => {
      if (window.confirm('Ben je zeker dat je al je instellingen, speelgeschiedenis en playlists wil verwijderen?')) {
        this.props.resetLocalPreferences();
      }
    };
  
    render({ settings }, { docTitle, docDescription }) {
      return (
        <div class={'page-container'}>
          <Header title={docTitle} sharetext={docDescription} />
          <main class={'content ' + style.settings}>
            <h1 class={'main-title'}>
              {docTitle}
              <small class={'main-subtitle'}>🎚️ Enkele knoppen om op te drukken</small>
            </h1>
            <h2 class={style['content-title']}>Thema</h2>
            <p class={style.selecttheme}>
              <DropDown
                initialValue={settings && settings.theme ? settings.theme : 'default'}
                optionList={this.state.themeOptions}
                valueChanged={this.themeOptionChanged.bind(this)}
              />
            </p>
            <h2 class={style['content-title']}>Reset</h2>
            <p>Door op de knop de drukken verwijder je je al je instellingen, speelgeschiedenis en playlists.</p>
            <button class={'btn btn--secondary'} onClick={this.resetLocalPreferences.bind(this)}>
              Reset nu
            </button>
            <h2 class={style['content-title']}>Over</h2>
            <p>
                Radiostations.be is een gratis website zonder reclame die je kan gebruiken om te luisteren naar {' '}
                <Link href="/radio-stations" native>
                  radiostations
                </Link>
                ,{' '}
                <Link href="/podcasts" native>
                  podcasts
                </Link>{' '}
                en om {' '}
                <Link href="/playlists" native>
                  je eigen playlists
                </Link>{' '} van radiostations maken.{' '}
                <br /><br />
                TIP: Maak Radiostations.be jouw startpagina om elke pc sessie naar jouw favoriete radiostations te luisteren.
              </p>
            <Link href="/about" class={'btn btn--secondary'} native>
              Lees meer
            </Link>
            <div class={style.experimental}>
              <h2 class={style['content-title']}>🧪 Experimenteel</h2>
              {!settings || !settings.experimental || !settings.experimental.chromecast ? (
                <p> <button onClick={this.enableChromecastSupport.bind(this)} class={'btn btn--small btn--secondary'}>
                Schakel Chromecast in
              </button>{' '} 
                    Proberen? Tof! Er kunnen zich nog problemen voordoen, maar 🤞.{' '}
                 </p>
              ) : (
                <p>
                  Te veel bugs? 🙁 Schakel Chromecast ondersteuning uit en {' '}
                  <a href="mailto:contact@jeroenboonen.be" rel="noopener me" target="_blank">
                    laat het mij weten
                  </a>{' '}
                  <button onClick={this.disableChromecastSupport.bind(this)} class={'btn btn--small btn--secondary'}>
                    Schakel Chromecast uit
                  </button>.{' '}
                  
                </p>
              )}
              {!settings || !settings.experimental || !settings.experimental.podcastindex ? (
                <p>
                   {' '}
                   <button onClick={this.enablePodcastindexSearch.bind(this)} class={'btn btn--small btn--secondary'}>
                    Schakel Podcastindex.org in
                  </button>{' '} als zoekengine in plaats van die van Apple.
                 {' '}
                  
                </p>
              ) : (
                <p>
                  <br />
                  Apple podcast zoek engine terug gebruiken? {' '}
                  <button onClick={this.disablePodcastindexSearch.bind(this)} class={'btn btn--small btn--secondary'}>
                    Schakel Podcastindex.org uit
                  </button>{' '}
                 🙁
                <br />
                 Bedankt om {' '}
                  <a href="https://podcastindex.org" target="_blank" rel="noopener">
                    Podcastindex.org
                  </a>{' '} 
                   uit te proberen{' '}
                  <a href="mailto:contact@jeroenboonen.be" rel="noopener me" target="_blank">
                    Laat mij je mening weten
                  </a>
                  . 🙂
                </p>
              )}
            </div>
          </main>
        </div>
      );
    }
  }
  