// warning: this file is even worse than Background.jsx
// if anyone wants to rewrite it to be actually decent, feel free
// otherwise it will be cleaned up probably when alex asks me to add something here :(
// - david
import variables from 'modules/variables';
import { PureComponent } from 'react';
import {
  MdSettings as Settings,
  MdOutlineInsertPhoto as Photos,
  MdOutlineFormatQuote as Quotes,
  MdUpload as ImportIcon,
  MdDownload as ExportIcon,
  MdArrowBack,
  MdDownload,
  MdOpenInNew,
} from 'react-icons/md';
import { TextField } from '@mui/material';
import { toast } from 'react-toastify';
import SettingsItem from '../../../main/settings/SettingsItem';

import { saveFile } from 'modules/helpers/settings/modals';
import Tooltip from '../../../../helpers/tooltip/Tooltip';

import FileUpload from '../../settings/FileUpload';
import Dropdown from '../../settings/Dropdown';

import '../../../welcome/welcome.scss';

export default class Create extends PureComponent {
  constructor() {
    super();
    this.state = {
      currentTab: 1,
      addonMetadata: {
        name: '',
        description: '',
        type: '',
        version: '',
        author: '',
        icon_url: '',
        screenshot_url: '',
      },
      addonData: '',
      settingsClasses: {
        current: 'toggle lightTheme',
        json: 'toggle lightTheme',
      },
    };
  }

  changeTab(tab, type) {
    if (type) {
      return this.setState({
        currentTab: tab,
        addonMetadata: {
          type: type,
        },
      });
    } else {
      this.setState({
        currentTab: tab,
      });
    }
  }

  importSettings(input) {
    const data = input || localStorage;
    let settings = {};
    Object.keys(data).forEach((key) => {
      if (
        key === 'statsData' ||
        key === 'firstRun' ||
        key === 'showWelcome' ||
        key === 'language' ||
        key === 'installed' ||
        key === 'stats' ||
        key === 'backup_settings' ||
        key === 'showReminder' ||
        key === 'experimental' ||
        key === 'debugtimeout' ||
        key === 'quotelanguage'
      ) {
        return;
      }
      settings[key] = localStorage.getItem(key);
    });

    this.setState({
      addonData: settings,
      settingsClasses: {
        current: input ? 'toggle lightTheme active' : 'toggle lightTheme',
        json: input ? 'toggle lightTheme active' : 'toggle lightTheme',
      },
    });

    toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
  }

  updateQuotePackType(type) {
    const addonMetadata = {
      type,
      name: this.state.addonMetadata.name,
      description: this.state.addonMetadata.description,
      version: this.state.addonMetadata.version,
      author: this.state.addonMetadata.author,
      icon_url: this.state.addonMetadata.icon_url,
      screenshot_url: this.state.addonMetadata.screenshot_url,
    };
    if (type === 'quotePack') {
      this.setState({
        addonMetadata: {
          addonMetadata,
          quotes: [],
        },
      });
    } else {
      this.setState({
        addonMetadata: {
          addonMetadata,
        },
        addonData: {
          url: '',
          name: '',
          author: '',
        },
      });
    }
  }

  updateQuotePackAPI(type, data) {
    this.setState({
      addonData: {
        url: type === 'url' ? data : this.state.addonData.url || '',
        name: type === 'name' ? data : this.state.addonData.name || '',
        author: type === 'author' ? data : this.state.addonData.author || '',
      },
    });
  }

  importQuotes() {
    this.setState({
      addonData: JSON.parse(localStorage.getItem('customQuote')) || [],
    });

    toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
  }

  importPhotos() {
    let data = [];
    try {
      const current = JSON.parse(localStorage.getItem('customBackground')) || [];
      data = current.map((item) => {
        return {
          photographer: '???',
          location: '???',
          url: {
            default: item,
          },
        };
      });
      toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
    } catch (e) {
      console.log(e);
      toast(variables.language.getMessage(variables.languagecode, 'toasts.error'));
    }

    this.setState({
      addonData: data,
    });
  }

  downloadAddon() {
    saveFile(
      {
        name: this.state.addonMetadata.name,
        description: this.state.addonMetadata.description,
        type:
          this.state.addonMetadata.type === 'quote_api' ? 'quotes' : this.state.addonMetadata.type,
        version: this.state.addonMetadata.version,
        author: this.state.addonMetadata.author,
        icon_url: this.state.addonMetadata.icon_url,
        screenshot_url: this.state.addonMetadata.screenshot_url,
        [this.state.addonMetadata.type]: this.state.addonData,
      },
      this.state.addonMetadata.name + '.json',
    );
  }

  render() {
    let tabContent;
    const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);

    const chooseType = (
      <>
        <div className="smallBanner">
          <div className="content">
            <span className="title">Help Centre</span>
            <span className="subtitle">
              Home of all docs and guides on creating addons for Mue's marketplace
            </span>
          </div>
          <button>
            Open Site
            <MdOpenInNew />
          </button>
        </div>
        <div className="themesToggleArea">
          <div className="options">
            <div className="toggle lightTheme" onClick={() => this.changeTab(2, 'photos')}>
              <Photos />
              <span>{getMessage('modals.main.marketplace.photo_packs')}</span>
            </div>
            <div className="toggle lightTheme" onClick={() => this.changeTab(2, 'quotes')}>
              <Quotes />
              <span>{getMessage('modals.main.marketplace.quote_packs')}</span>
            </div>
            <div className="toggle lightTheme" onClick={() => this.changeTab(2, 'settings')}>
              <Settings />
              <span>{getMessage('modals.main.marketplace.preset_settings')}</span>
            </div>
          </div>
        </div>
      </>
    );

    // todo: find a better way to do all this
    const nextDescriptionDisabled = !(
      this.state.addonMetadata.name !== undefined &&
      this.state.addonMetadata.description !== undefined &&
      this.state.addonMetadata.version !== undefined &&
      this.state.addonMetadata.author !== undefined &&
      this.state.addonMetadata.icon_url !== undefined &&
      this.state.addonMetadata.screenshot_url !== undefined
    );

    const setMetadata = (data, type) => {
      this.setState({
        addonMetadata: {
          name: type === 'name' ? data : this.state.addonMetadata.name,
          description: type === 'description' ? data : this.state.addonMetadata.description,
          version: type === 'version' ? data : this.state.addonMetadata.version,
          author: type === 'author' ? data : this.state.addonMetadata.author,
          icon_url: type === 'icon_url' ? data : this.state.addonMetadata.icon_url,
          screenshot_url:
            type === 'screenshot_url' ? data : this.state.addonMetadata.screenshot_url,
          type: this.state.addonMetadata.type,
        },
      });
    };

    const writeDescription = (
      <>
        <div className="smallBanner">
          <div className="content">
            <span className="title" style={{ textTransform: 'capitalize' }}>
              Create {this.state.addonMetadata.type} Pack
            </span>
            <span className="subtitle">Description of what is being made</span>
          </div>
          <button>
            Example
            <MdDownload />
          </button>
        </div>
        <SettingsItem title={getMessage('modals.main.addons.create.metadata.name')}>
          <TextField
            label={getMessage('modals.main.addons.create.metadata.name')}
            varient="outlined"
            InputLabelProps={{ shrink: true }}
            value={this.state.addonMetadata.name}
            onInput={(e) => setMetadata(e.target.value, 'name')}
          />
        </SettingsItem>
        <SettingsItem title={getMessage('modals.main.marketplace.product.version')}>
          <TextField
            label={getMessage('modals.main.marketplace.product.version')}
            varient="outlined"
            InputLabelProps={{ shrink: true }}
            value={this.state.addonMetadata.version}
            onInput={(e) => setMetadata(e.target.value, 'version')}
          />
        </SettingsItem>
        <SettingsItem title={getMessage('modals.main.marketplace.product.author')}>
          <TextField
            label={getMessage('modals.main.marketplace.product.author')}
            varient="outlined"
            InputLabelProps={{ shrink: true }}
            value={this.state.addonMetadata.author}
            onInput={(e) => setMetadata(e.target.value, 'author')}
          />
        </SettingsItem>
        <SettingsItem title={getMessage('modals.main.addons.create.metadata.icon_url')}>
          <TextField
            label={getMessage('modals.main.addons.create.metadata.icon_url')}
            varient="outlined"
            InputLabelProps={{ shrink: true }}
            value={this.state.addonMetadata.icon_url}
            onInput={(e) => setMetadata(e.target.value, 'icon_url')}
          />
        </SettingsItem>
        <SettingsItem title={getMessage('modals.main.addons.create.metadata.screenshot_url')}>
          <TextField
            label={getMessage('modals.main.addons.create.metadata.screenshot_url')}
            varient="outlined"
            InputLabelProps={{ shrink: true }}
            value={this.state.addonMetadata.screenshot_url}
            onInput={(e) => setMetadata(e.target.value, 'screenshot_url')}
          />
        </SettingsItem>
        <SettingsItem
          title={getMessage('modals.main.addons.create.metadata.description')}
          final={true}
        >
          <TextField
            label={getMessage('modals.main.addons.create.metadata.description')}
            varient="outlined"
            InputLabelProps={{ shrink: true }}
            multiline
            spellCheck={false}
            rows={4}
            value={this.state.addonMetadata.description}
            onInput={(e) => setMetadata(e.target.value, 'description')}
          />
        </SettingsItem>
        <div className="createButtons">
          <button onClick={() => this.changeTab(1)}>
            {getMessage('modals.welcome.buttons.previous')}
          </button>
          <button
            onClick={() => this.changeTab(this.state.addonMetadata.type)}
            disabled={nextDescriptionDisabled}
          >
            {getMessage('modals.welcome.buttons.next')}
          </button>
        </div>
      </>
    );

    // settings
    const nextSettingsDisabled = this.state.addonData === '';
    const importSettings = (
      <>
        <SettingsItem final={true} title={getMessage('modals.welcome.sections.settings.title')}>
          <div className="themesToggleArea">
            <div className="options" style={{ maxWidth: '512px' }}>
              <div
                className={this.state.settingsClasses.current}
                onClick={() => this.importSettings()}
              >
                <ExportIcon />
                <span>{getMessage('modals.main.addons.create.settings.current')}</span>
              </div>
              <div
                className={this.state.settingsClasses.json}
                onClick={() => document.getElementById('file-input').click()}
              >
                <ImportIcon />
                <span>{getMessage('modals.main.addons.create.settings.json')}</span>
              </div>
            </div>
          </div>
        </SettingsItem>
        <SettingsItem final={true}>
          <FileUpload
            id="file-input"
            type="settings"
            accept="application/json"
            loadFunction={(e) => this.importSettings(JSON.parse(e.target.result))}
          />
        </SettingsItem>
        <div className="createButtons">
          <button onClick={() => this.changeTab(2)}>
            {getMessage('modals.welcome.buttons.previous')}
          </button>
          <button onClick={() => this.changeTab(3)} disabled={nextSettingsDisabled}>
            {getMessage('modals.welcome.buttons.next')}
          </button>
        </div>
      </>
    );

    // quotes
    const nextQuotesDisabled = !(
      (this.state.addonMetadata.type === 'quote_api' &&
        this.state.addonData.url !== '' &&
        this.state.addonData.name !== '' &&
        this.state.addonData.author !== '') ||
      (this.state.addonMetadata.type === 'quotes' && this.state.addonData.quotes !== '')
    );
    const addQuotes = (
      <>
        <SettingsItem final={true} title={getMessage('modals.main.addons.create.quotes.title')}>
          <Dropdown
            label={getMessage('modals.main.settings.sections.time.type')}
            noSetting
            onChange={(e) => this.updateQuotePackType(e)}
          >
            <option value="quotes">
              {getMessage('modals.main.addons.create.quotes.local.title')}
            </option>
            <option value="quote_api">
              {getMessage('modals.main.addons.create.quotes.api.title')}
            </option>
          </Dropdown>
        </SettingsItem>
        {this.state.addonMetadata.type === 'quote_api' ? (
          <>
            <TextField
              label={getMessage('modals.main.addons.create.quotes.api.url')}
              varient="outlined"
              InputLabelProps={{ shrink: true }}
              value={this.state.addonData.url}
              onInput={(e) => this.updateQuotePack(e.target.value, 'url')}
            />
            <TextField
              label={getMessage('modals.main.addons.create.quotes.api.name')}
              varient="outlined"
              InputLabelProps={{ shrink: true }}
              value={this.state.addonData.name}
              onInput={(e) => this.updateQuotePack(e.target.value, 'name')}
            />
            <TextField
              label={getMessage('modals.main.addons.create.quotes.api.author')}
              varient="outlined"
              InputLabelProps={{ shrink: true }}
              value={this.state.addonData.author}
              onInput={(e) => this.updateQuotePack(e.target.value, 'author')}
            />
            <br />
            <br />
          </>
        ) : (
          <SettingsItem
            final={true}
            title={getMessage('modals.main.addons.create.settings.current')}
          >
            <div className="themesToggleArea">
              <div className="options">
                <div
                  onClick={() => this.importQuotes()}
                  className="toggle lightTheme"
                  style={{ width: '60%', margin: '10px 0 10px 0' }}
                >
                  <ExportIcon />
                  <span>{getMessage('modals.main.addons.create.settings.current')}</span>
                </div>
              </div>
            </div>
          </SettingsItem>
        )}
        <div className="createButtons">
          <button onClick={() => this.changeTab(2)}>
            {getMessage('modals.welcome.buttons.previous')}
          </button>
          <button onClick={() => this.changeTab(3)} disabled={nextQuotesDisabled}>
            {getMessage('modals.welcome.buttons.next')}
          </button>
        </div>
      </>
    );

    // photos
    const nextPhotosDisabled = !(
      this.state.addonData.photos !== '' && this.state.addonData.photos !== []
    );
    const addPhotos = (
      <>
        <SettingsItem
          final={true}
          title={getMessage('modals.main.addons.create.photos.title')}
          subtitle={'Import from custom settings.'}
        >
          <div className="themesToggleArea">
            <div className="options">
              <div
                onClick={() => this.importPhotos()}
                className="toggle lightTheme"
                style={{ width: '60%', margin: '10px 0 10px 0' }}
              >
                <ExportIcon />
                <span>{getMessage('modals.main.addons.create.settings.current')}</span>
              </div>
            </div>
          </div>
        </SettingsItem>
        <br />
        <div className="createButtons">
          <button onClick={() => this.changeTab(2)}>
            {getMessage('modals.welcome.buttons.previous')}
          </button>
          <button onClick={() => this.changeTab(3)} disabled={nextPhotosDisabled}>
            {getMessage('modals.welcome.buttons.next')}
          </button>
        </div>
      </>
    );

    const downloadAddon = (
      <>
        <div className="smallBanner">
          <div className="content">
            <span className="title" style={{ textTransform: 'capitalize' }}>
              Next step, Publishing...
            </span>
            <span className="subtitle">
              Visit the Mue Knowledgebase on information on how to publish your newly created addon.
            </span>
          </div>
          <button>
            Learn More
            <MdOpenInNew />
          </button>
        </div>
        <SettingsItem final={true}>
          <div className="themesToggleArea">
            <div className="options">
              <div
                onClick={() => this.downloadAddon()}
                className="toggle lightTheme"
                style={{ width: '60%', margin: '10px 0 10px 0' }}
              >
                <ExportIcon />
                <span>{getMessage('modals.main.addons.create.finish.download')}</span>
              </div>
            </div>
          </div>
        </SettingsItem>
        <div className="createButtons">
          <button
            onClick={() =>
              this.changeTab(
                this.state.addonMetadata.type === 'quote_api'
                  ? 'quotes'
                  : this.state.addonMetadata.type,
              )
            }
            disabled={nextDescriptionDisabled}
          >
            {getMessage('modals.welcome.buttons.previous')}
          </button>
        </div>
        {/*<button
          onClick={() =>
            this.changeTab(
              this.state.addonMetadata.type === 'quote_api'
                ? 'quotes'
                : this.state.addonMetadata.type,
            )
          }
        >
          {getMessage('modals.welcome.buttons.previous')}
        </button>*/}
      </>
    );

    switch (this.state.currentTab) {
      case 2:
        tabContent = writeDescription;
        break;
      case 'settings':
        tabContent = importSettings;
        break;
      case 'quotes':
        tabContent = addQuotes;
        break;
      case 'photos':
        tabContent = addPhotos;
        break;
      case 3:
        tabContent = downloadAddon;
        break;
      default:
        tabContent = chooseType;
    }

    return (
      <>
        <div className="flexTopMarketplace">
          {this.state.currentTab !== 1 && (
            <div className="returnButton">
              <Tooltip title="Go back" key="cheese">
                <MdArrowBack
                  className="backArrow"
                  onClick={() => this.changeTab(this.state.currentTab - 1)}
                />
              </Tooltip>
            </div>
          )}
          <span className="mainTitle">{getMessage('modals.main.addons.create.other_title')}</span>
        </div>
        {tabContent}
      </>
    );
  }
}