text: import { normalizeConfig } from '../utils'
  import Form from '@admin/components/form'
  import settings from '../settings'
  import PropTypes from 'prop-types'
  import style from '../style'
  import React from 'react'
  
  class Video extends React.PureComponent {
  
    static propTypes = {
      entity: PropTypes.object,
      device: PropTypes.string,
      pageType: PropTypes.string,
      parentEditable: PropTypes.bool,
      website: PropTypes.object,
      onBack: PropTypes.func,
      onChange: PropTypes.func
    }
  
    _handleDone = this._handleDone.bind(this)
    _handleUpdate = this._handleUpdate.bind(this)
  
    constructor(props) {
      super(props)
      const { entity } = props
      this.state = {
        config: entity
      }
    }
  
    render() {
      return <Form { ...this._getForm() } />
    }
  
    componentDidUpdate(prevProps, prevState) {
      const { config } = this.state
      if(!_.isEqual(config, prevState.config)) {
        this._handleChange()
      }
    }
  
    _getForm() {
      const { device, pageType, parentEditable, website } = this.props
      const { config } = this.state
      return {
        title: 't(Edit Block)',
        color: 'pink',
        onChange: this._handleUpdate,
        onCancel: this._handleDone,
        cancelIcon: 'chevron-left',
        saveText: null,
        buttons: [
          { label: 'Done', color: 'red', handler: this._handleDone }
        ],
        tabs: [
          {
            label: 't(Content)',
            sections: [
              {
                fields: [
                  { label: 't(Video)', name: 'content.video', type: 'videofield', required: true, defaultValue: config.content.video }
                ]
              }
            ]
          },
          ...this._canEditStyles() ? [
            {
              label: 't(Styles)',
              sections: style(config, device, website)
            }
          ] : [],
          ...this._canEditSettings() ? [
            {
              label: 't(Settings)',
              sections: settings(config, 'block', pageType, parentEditable)
            }
          ] : []
        ]
      }
    }
  
    _canEditSettings() {
      const { pageType } = this.props
      return pageType !== 'page'
    }
  
    _canEditStyles() {
      const { entity, pageType } = this.props
      return pageType !== 'page' || _.includes(entity.rules, 'styles')
    }
  
    _handleDone() {
      this.props.onBack()
    }
  
    _handleChange() {
      const { entity } = this.props
      const { config } = this.state
      const canEditSettings = this._canEditSettings()
      const canEditStyles = this._canEditStyles()
      this.props.onChange(normalizeConfig({
        ...entity,
        meta: canEditSettings ? config.meta : entity.meta,
        rules: canEditSettings ? config.rules : entity.rules,
        content: config.content,
        styles: canEditStyles ? config.styles : entity.styles,
        settings: canEditSettings ? config.settings : entity.settings
      }))
    }
  
    _handleUpdate(config) {
      this.setState({ config })
    }
  
  }
  
  export default Video
  