import React from 'react'

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

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

export default function TileHyperlinkForm({ tile, pageList, popupList, parent }) {
  const isExternalLink = tile.target_page_id === EXTERNAL_LINK
  // const isPopupLink = (
  //   tile.target_page_id === OPEN_POPUP_LINK ||
  //   tile.target_page_id === CLOSE_POPUP_LINK
  // )
  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>
      {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) && (
        <div className='row single'>
          <Select
            title="Popup"
            name='target_popup'
            selected={tile.settings.target_popup || NO_POPUP}
            options={popupList}
            onChange={parent.handleSettingsSelect}
          />
        </div>
      )}
    </div>
  )
}