import {FormattedMessage, injectIntl} from 'react-intl';
import * as React from 'react';

import type {FloodSettings} from '@shared/types/FloodSettings';

import {Form, FormRow, Select, SelectItem, Radio} from '../../../ui';
import Languages from '../../../constants/Languages';
import ModalFormSectionHeader from '../ModalFormSectionHeader';
import SettingStore from '../../../stores/SettingStore';
import SettingsTab from './SettingsTab';
import TorrentContextMenuActionsList from './lists/TorrentContextMenuActionsList';
import TorrentListColumnsList from './lists/TorrentListColumnsList';

import type {Language} from '../../../constants/Languages';

class UITab extends SettingsTab {
  torrentListViewSize = SettingStore.floodSettings.torrentListViewSize;
  selectedLanguage = SettingStore.floodSettings.language;
  UITagSelectorMode = SettingStore.floodSettings.UITagSelectorMode;

  getLanguageSelectOptions() {
    return Object.keys(Languages).map((languageID) => (
      <SelectItem key={languageID} id={languageID}>
        {Languages[languageID as 'auto'].id != null
          ? this.props.intl.formatMessage({
              id: Languages[languageID as 'auto'].id,
            })
          : Languages[languageID as Language]}
      </SelectItem>
    ));
  }

  handleFormChange = ({
    event,
    formData,
  }: {
    event: Event | React.FormEvent<HTMLFormElement>;
    formData: Record<string, unknown>;
  }) => {
    const inputElement = event.target as HTMLInputElement;

    if (inputElement.type === 'radio') {
      this.torrentListViewSize = formData['ui-torrent-size'] as FloodSettings['torrentListViewSize'];
      this.UITagSelectorMode = formData['ui-tag-selector-mode'] as FloodSettings['UITagSelectorMode'];
      this.props.onSettingsChange({
        torrentListViewSize: this.torrentListViewSize,
        UITagSelectorMode: this.UITagSelectorMode,
      });
    }

    if (inputElement.name === 'language') {
      this.selectedLanguage = formData.language as FloodSettings['language'];
      if (this.selectedLanguage === 'translate') {
        SettingStore.saveFloodSettings({language: 'translate'});
      } else {
        this.props.onSettingsChange({language: this.selectedLanguage});
      }
    }
  };

  render() {
    return (
      <Form onChange={this.handleFormChange}>
        <ModalFormSectionHeader key="locale-header">
          <FormattedMessage id="settings.ui.language" />
        </ModalFormSectionHeader>
        <FormRow key="locale-selection">
          <Select disabled={this.selectedLanguage === 'translate'} defaultID={this.selectedLanguage} id="language">
            {this.getLanguageSelectOptions()}
          </Select>
        </FormRow>
        <ModalFormSectionHeader>
          <FormattedMessage id="settings.ui.tag.selector.mode" />
        </ModalFormSectionHeader>
        <FormRow>
          <Radio
            defaultChecked={this.UITagSelectorMode === 'single'}
            groupID="ui-tag-selector-mode"
            id="single"
            width="auto">
            <FormattedMessage id="settings.ui.tag.selector.mode.single" />
          </Radio>
          <Radio
            defaultChecked={this.UITagSelectorMode === 'multi'}
            groupID="ui-tag-selector-mode"
            id="multi"
            width="auto">
            <FormattedMessage id="settings.ui.tag.selector.mode.multi" />
          </Radio>
        </FormRow>
        <ModalFormSectionHeader>
          <FormattedMessage id="settings.ui.torrent.list" />
        </ModalFormSectionHeader>
        <FormRow>
          <Radio
            defaultChecked={this.torrentListViewSize === 'expanded'}
            groupID="ui-torrent-size"
            id="expanded"
            width="auto">
            <FormattedMessage id="settings.ui.torrent.size.expanded" />
          </Radio>
          <Radio
            defaultChecked={this.torrentListViewSize === 'condensed'}
            groupID="ui-torrent-size"
            id="condensed"
            width="auto">
            <FormattedMessage id="settings.ui.torrent.size.condensed" />
          </Radio>
        </FormRow>
        <ModalFormSectionHeader>
          <FormattedMessage id="settings.ui.displayed.details" />
        </ModalFormSectionHeader>
        <FormRow>
          <TorrentListColumnsList
            torrentListViewSize={this.torrentListViewSize}
            onSettingsChange={this.props.onSettingsChange}
          />
        </FormRow>
        <ModalFormSectionHeader>
          <FormattedMessage id="settings.ui.displayed.context.menu.items" />
        </ModalFormSectionHeader>
        <FormRow>
          <TorrentContextMenuActionsList onSettingsChange={this.props.onSettingsChange} />
        </FormRow>
      </Form>
    );
  }
}

export default injectIntl(UITab);
