text: import Button from '@admin/components/button'
  import PropTypes from 'prop-types'
  import Slide from './slide'
  import React from 'react'
  import Edit from './edit'
  import New from './new'
  
  class SlidesField extends React.Component {
  
    static contextTypes = {
      form: PropTypes.object
    }
  
    static propTypes = {
      defaultValue: PropTypes.array,
      ratio: PropTypes.number,
      website: PropTypes.object,
      onChange: PropTypes.func,
      onReady: PropTypes.func
    }
  
    state = {
      slides: []
    }
  
    _handleAdd = this._handleAdd.bind(this)
    _handleCreate = this._handleCreate.bind(this)
  
    render() {
      const { slides } = this.state
      return (
        <div className="websites-slidesfield">
          <div className="websites-slidesfield-slides">
            { slides.map((slide, index) => (
              <Slide { ...this._getSlide(slide, index) }  key={`slide_${index}`} />
            ))}
            <div className="websites-slidesfield-add">
              <Button { ...this._getAdd() } />
            </div>
          </div>
        </div>
      )
    }
  
    componentDidMount() {
      const { defaultValue } = this.props
      if(defaultValue) this._handleSet(defaultValue)
      this.props.onReady()
    }
  
    componentDidUpdate(prevProps, prevState) {
      const { ratio } = this.props
      const { slides } = this.state
      if(ratio !== prevProps.ratio) {
        this._handleRatio()
      }
      if(!_.isEqual(slides, prevState.slides)) {
        this.props.onChange(slides)
      }
    }
  
    _getAdd() {
      return {
        label: '+ add new slide',
        className: 'link',
        handler: this._handleAdd
      }
    }
  
    _getEdit(slide, index) {
      const { website } = this.props
      return {
        slide,
        website,
        onDone: this._handleUpdate.bind(this, index)
      }
    }
  
    _getSlide(slide, index) {
      return {
        slide,
        index,
        onEdit: this._handleEdit.bind(this, slide, index),
        onMove: this._handleMove.bind(this),
        onRemove: this._handleRemove.bind(this, index)
      }
    }
  
    _getNew() {
      const { website } = this.props
      return {
        website,
        onDone: this._handleCreate
      }
    }
  
    _handleAdd() {
      this.context.form.push(<New { ...this._getNew() } />)
    }
  
    _handleCreate(slide) {
      const { slides } = this.state
      this.setState({
        slides: [
          ...slides,
          slide
        ]
      })
    }
  
    _handleEdit(slide, index) {
      this.context.form.push(<Edit { ...this._getEdit(slide, index) } />)
    }
  
    _handleMove(from, to) {
      const { slides } = this.state
      this.setState({
        slides: (from < to) ? [
          ...slides.slice(0, from),
          ...slides.slice(from + 1, to + 1),
          slides[from],
          ...slides.slice(to + 1)
        ] : [
          ...slides.slice(0, to),
          slides[from],
          ...slides.slice(to, from),
          ...slides.slice(from + 1)
        ]
      })
    }
  
    _handleRemove(index) {
      const { slides } = this.state
      this.setState({
        slides: slides.filter((slide, i) => {
          return i !== index
        })
      })
    }
  
    _handleSet(slides) {
      this.setState({ slides })
    }
  
    _handleUpdate(index, newslide) {
      const { slides } = this.state
      this.setState({
        slides: slides.map((slide, i) => {
          return i == index ? newslide : slide
        })
      })
    }
  
  }
  
  export default SlidesField
  