import * as React from 'react'
import InlineSVG from 'svg-inline-react'
import * as cx from 'classnames'
import { debounce, map, orderBy, includes, filter, find } from 'lodash'
import { Input, Button } from '@drifthq/tide'
import './styles.styl'
import { DomainComponentProps } from './interfaces'

import DomainRow from './DomainRow'
import SearchBlankState from '../../ActivityFeed/SearchBlankState'

import { IDomainObj } from '../../../modules/settings/interfaces'

const close = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/settings-close.svg')
const driftLogo = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/Drift_logo.svg')
const DESC_SORT = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/desc_sort.svg')
const ASC_SORT = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/asc_sort.svg')

const METRICS = {
  DATE: 'DATE',
  DOMAIN: 'DOMAIN',
  ASC: 'ASC',
  DESC: 'DESC',
}

declare const __VERSION__: string

const flashSaveIcon = (querySelector: string) => {
  const savedIcon = document.querySelector(querySelector) as HTMLElement
  savedIcon.style.opacity = '1'
  setTimeout(() => {
    savedIcon.style.opacity = '0'
  }, 2000)
}

const domainRegex = /^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/

class Domains extends React.Component<DomainComponentProps, { metric: string, order: string, addMode: boolean, inputValue: string }> {
  debouncedSaveMuteListEmail = () => {
    const valueToSave = this.state.inputValue
    if (domainRegex.test(valueToSave)) {
      this.props.actions.addDomainToMuteList(this.state.inputValue)
      this.setState({ inputValue: '', addMode: false })
    }
  }
  debouncedSaveNotifications = debounce(() => {
    flashSaveIcon('.notifications-settings-saved')
  }, 500)

  handleSortToggle = (metric: string) => {
    if (metric === this.state.metric) {
      this.setState({ metric, order: this.state.order === METRICS.ASC ? METRICS.DESC : METRICS.ASC })
    } else {
      this.setState({ metric, order: METRICS.ASC })
    }
  }

  renderRows = (domainMuteList: IDomainObj[]) => {
    const filteredList = filter(domainMuteList, domain => this.state.addMode || includes(domain.domain, this.state.inputValue))
    const sortedList = orderBy(filteredList, this.state.metric.toLowerCase(), this.state.order.toLowerCase())
    return map(sortedList, ({ domain, date }) => <DomainRow key={domain} domain={domain} date={date} />)
  }

  constructor(props: DomainComponentProps) {
    super(props)
    this.state = { metric: METRICS.DATE, order: METRICS.DESC, addMode: false, inputValue: '' }
  }

  render() {
    const {
      handleOnSettingsClick,
      handleCloseSettings,
      domainMuteList,
      actions: { logout },
    } = this.props
    const inputProps = {
      spellCheck: false,
    }

    const renderedRows = this.renderRows(domainMuteList)
    const domainExistsAlready = !!find(domainMuteList, { domain: this.state.inputValue })
    const domainIsInvalid = this.state.addMode && this.state.inputValue && (!domainRegex.test(this.state.inputValue) || domainExistsAlready)
    return (
      <div className="settings-wrapper settings-domains-wrapper">
        <div className="settings-header">
          <InlineSVG className="powered-by-drift active" src={driftLogo} />
          <InlineSVG className="settings-close" src={close} onClick={handleCloseSettings} />
        </div>
        <div className="settings">
          <div className="settings-manage-link" onClick={handleOnSettingsClick}>
            &lt; All Settings
          </div>
          <div className="title">
            <h3>Unfollowed Domains</h3>
            <p className="drift-outbound-p-tag settings">
              You are no longer seeing activity for emails that match these domains. You can add or remove domains from this list to manage their future activity. <a target="_blank" href={'https://help.drift.com/integrations/using-the-drift-email-extension'}>Learn More</a> 
            </p>
          </div>
          <div className="search-add-field">
            <Input
              className={cx({ add: this.state.addMode, invalid: domainIsInvalid })}
              value={this.state.inputValue}
              onChange={(e: React.SyntheticEvent<HTMLInputElement>) => {
                this.setState({ inputValue: e.currentTarget.value })
              }}
              placeholder={this.state.addMode ? 'add: newdomain.com' : 'Search Domains'}
              {...inputProps}
            />
            <div>
              { this.state.addMode
                ? <div className="add-mode-buttons">
                    <Button type={'subtle'} onClick={() => this.setState({ addMode: false })}>Cancel</Button>
                    <Button onClick={() => {
                      if (!domainExistsAlready) {
                        this.debouncedSaveMuteListEmail()
                      }
                    }}>Save</Button>
                  </div>
                : <Button type={'secondary'} onClick={() => this.setState({ addMode: true })}>Add Domain</Button> }
            </div>
          </div>
          {domainIsInvalid && <div className="error-helper-text">{domainExistsAlready
            ? 'You are already unfollowing this domain'
            : 'Please enter a valid domain. Eg. drift.com'}</div> }
          <table className="table-chart drift-table">
            <thead>
              <tr>
                <th className="table-header" onClick={() => this.handleSortToggle(METRICS.DOMAIN)}>
                  Domain
              {this.state.metric === METRICS.DOMAIN && (
                    <InlineSVG className="sort-icon" src={this.state.order === METRICS.ASC ? ASC_SORT : DESC_SORT} />
                  )}
                </th>
                <th className="table-header" onClick={() => this.handleSortToggle(METRICS.DATE)}>
                  Unfollowed
              {this.state.metric === METRICS.DATE && (
                    <InlineSVG className="sort-icon" src={this.state.order === METRICS.ASC ? ASC_SORT : DESC_SORT} />
                  )}
                </th>
                <th className="table-header"></th>
              </tr>
            </thead>
            <colgroup>
              <col className="domain" />
              <col className="unfollow" />
              <col className="remove" />
            </colgroup>
            <tbody>
              {renderedRows}
            </tbody>
          </table>
          {!renderedRows.length && <SearchBlankState searchEmpty={!!this.state.inputValue} noDomains={!renderedRows.length && !this.state.inputValue} /> }
          <div className="setting-footer">
            <a className="logout" onClick={() => logout()}>
              logout
            </a>
            <div className="drift-outbound-version">version {__VERSION__}</div>
          </div>
        </div>
      </div>
    )
  }
}

export default Domains