import React from 'react'

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

import { IMAGE_TILE_STYLES } from './tile.constants'

export default function TileImageForm({ tile, errorFields, parent }) {
  return (
    <div>
      <div className='row imageUrl'>
        {tile.settings.url && <div className='thumb'><img src={tile.settings.url} /></div>}
        <TextInput
          title=""
          placeholder='http://'
          name="url"
          required
          data={tile.settings}
          error={errorFields.has('url')}
          onChange={parent.handleImageChange}
          autoComplete="off"
        />
      </div>
      <div className='row pair'>
        <Checkbox
          label="Tiled"
          name="is_tiled"
          checked={tile.settings.is_tiled}
          onChange={parent.handleSettingsSelect}
          autoComplete="off"
        />
        {tile.settings.is_tiled &&
          <Select
            name='tile_style'
            selected={tile.settings.tile_style || 'tile'}
            options={IMAGE_TILE_STYLES}
            title=''
            onChange={parent.handleSettingsSelect}
          />
        }
      </div>
    </div>
  )
}