import { h, Component } from 'preact'
import { Link } from 'react-router-dom'

import client from '../../client.js'

export default function TaskFormView (props) {
  return (
    <div class='form'>
      <div>
        {props.content && (
          <div>
            {props.content.name}
          </div>
        )}
        <label>content</label>
        <button onClick={props.clearContent}>x</button>
      </div>
      <div>
        {props.style && (
          <div>
            {props.style.name}
          </div>
        )}
        <label>style</label>
        <button onClick={props.clearStyle}>x</button>
      </div>
      <div>
        <input type='range' step='0.001' min='0.001' max='1' value={props.alpha}
          onInput={(e) => props.setAlpha(e.target.value)}
        />
        alpha: {props.alpha}
      </div>
      <div>
        <button onClick={props.createTask}>Create</button>
      </div>
    </div>
  )
}