import React from 'react'

import {
  TextInput,
  Select,
} from 'app/common'

import {
  CURSORS,
  NO_LINK, EXTERNAL_LINK,
  NO_POPUP, OPEN_POPUP_LINK, CLOSE_POPUP_LINK, TOGGLE_POPUP_LINK
} from './tile.constants'

import { dispatch } from 'app/store'
import { toggleCursorList } from 'app/views/page/page.actions'

export default function TileHyperlinkForm({ tile, pageList, popupList, cursors, parent }) {
  const isExternalLink = tile.target_page_id === EXTERNAL_LINK
  let cursor
  if (tile.settings.cursor === 'custom' && tile.settings.custom_cursor_id) {
    cursor = cursors[tile.settings.custom_cursor_id]
  }
  return (
    <div>
      <div className={'row selects'}>
        <Select
          title=''
          name='target_page_id'
          selected={tile.target_page_id || NO_LINK}
          options={pageList}
          onChange={parent.handleSelect}
        />
        <Select
          title=''
          name='cursor'
          selected={tile.settings.cursor}
          options={CURSORS}
          defaultOption="Cursor"
          onChange={parent.handleSettingsSelect}
        />
      </div>
      {cursor && (
        <img src={cursor.url} className="sampleCursor" onClick={() => toggleCursorList(true)(dispatch)} />
      )}
      {isExternalLink && (
        <div>
          <TextInput
            title=""
            placeholder='http://'
            name="external_link_url"
            data={tile.settings}
            onChange={parent.handleSettingsChange}
            autoComplete="off"
          />
        </div>
      )}
      {(tile.target_page_id === OPEN_POPUP_LINK || tile.target_page_id === CLOSE_POPUP_LINK || tile.target_page_id === TOGGLE_POPUP_LINK) && (
        <div className='row single'>
          <Select
            title="Popup"
            name='target_popup'
            selected={tile.settings.target_popup || NO_POPUP}
            options={popupList}
            onChange={parent.handleSettingsSelect}
          />
        </div>
      )}
    </div>
  )
}