import * as React from 'react'
import InlineSVG from 'svg-inline-react'
import { map } from 'lodash'
import { ActionCreator } from 'typescript-fsa'
import { IInboxSetting } from '../../../modules/settings/interfaces'

import './styles.styl'
const saved = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/save-check.svg')

interface IInboxes {
  inboxesToRunExtensionOn: any
  actions: {
    updateInboxSettings: ActionCreator<IInboxSetting>,
  }
}

const Inboxes = ({ inboxesToRunExtensionOn, actions: { updateInboxSettings } }: IInboxes) => {
  const onCheckboxClick = (inbox: string) => (event: any) => {
    const savedIcon = document.querySelector('.inbox-saved') as HTMLElement
    savedIcon.style.opacity = '1'
    setTimeout(() => {
      savedIcon.style.opacity = '0'
    }, 2000)
    updateInboxSettings({ [inbox]: !!event.target.checked })
  }

  return (
    <div className="setting">
      <div className="save-header">
        <h5 className="drift-outbound-header-text settings">Linked Gmail Accounts</h5>
        <InlineSVG className="saved-icon inbox-saved" src={saved} />
      </div>
      <p className="drift-outbound-p-tag settings">Enable or disable Drift Tracking on your email accounts</p>
      {map(inboxesToRunExtensionOn, (value: boolean, inbox: string) => (
        <div key={inbox} className="inbox-settings">
          <input
            id={`inbox-checkbox-${inbox}`}
            className="inbox-checkbox"
            type="checkbox"
            defaultChecked={value}
            onChange={onCheckboxClick(inbox)}
          />
          <label className="inbox-checkbox-label" htmlFor={`inbox-checkbox-${inbox}`} />
          <p className="inbox-email">{inbox}</p>
        </div>
      ))}
    </div>
  )
}

export default Inboxes