text: import DateRangeField from '@apps/maha/admin/components/dashboard/daterangefield'
  import ChartField from '@apps/maha/admin/components/dashboard/chartfield'
  import ProgramToken from '@apps/crm/admin/tokens/program'
  import Form from '@admin/components/form'
  import PropTypes from 'prop-types'
  import React from 'react'
  
  class Card extends React.PureComponent {
  
    static propTypes = {
      formdata: PropTypes.object,
      onBack: PropTypes.func,
      onCancel: PropTypes.func,
      onChange: PropTypes.func,
      onNext: PropTypes.func,
      onSave: PropTypes.func
    }
  
    state = {
      config: {}
    }
  
    form = null
  
    _handleBack = this._handleBack.bind(this)
    _handleChange = this._handleChange.bind(this)
    _handleSubmit = this._handleSubmit.bind(this)
    _handleSuccess = this._handleSuccess.bind(this)
  
    render() {
      return <Form { ...this._getForm() } />
    }
  
    _getForm() {
      const { config } = this.state
      const type = _.get(config, 'config.type')
      const elements = _.get(config, 'config.elements')
      const program_id = _.get(config, 'config.program_id')
      const scope = _.get(config, 'config.scope')
      return {
        reference: node => this.form = node,
        showHeader: false,
        buttons: [
          { label: 't(Previous)', color: 'red', handler: this._handleBack },
          { label: 't(Finish)', color: 'red', handler: this._handleSubmit }
        ],
        onChange: this._handleChange,
        onSuccess: this._handleSuccess,
        sections: [
          {
            label: 'Data',
            fields: [
              { label: 'Scope', type: 'segment', fields: [
                { name: 'config.scope', type: 'radiogroup', options: [
                  { value: 'program', text: 't(Subscriptions to all lists from specific program)' },
                  { value: 'list', text: 't(Subscriptions to a specific list)' }
                ], defaultValue: 'program', required: true },
                { label: 't(Program)', name: 'config.program_id', type: 'lookup', endpoint: '/api/admin/crm/programs', valueKey: 'id', textKey: 'title', format: ProgramToken, required: true },
                ...scope === 'list' ? [
                  ...program_id ? [
                    { label: 't(List)', name: 'config.list_id', type: 'lookup', endpoint: `/api/admin/crm/programs/${program_id}/lists`, valueKey: 'id', textKey: 'title', required: true }
                  ] : [
                    { label: 't(List)', name: 'config.list_id', type: 'textfield', disabled: true, required: true }
                  ]
                ] : []
              ], required: true },
              { label: 't(Date Range)', name: 'config.daterange', type: DateRangeField, required: true }
            ]
          }, {
            label: 'Card',
            fields: [
              { label: 't(Background Color)', name: 'config.backgroundColor', type: 'colorfield', defaultValue: '#FFFFFF', required: true },
              { label: 't(Title Color)', name: 'config.titleColor', type: 'colorfield', defaultValue: '#000000', required: true }
            ]
          },
          {
            label: 't(Content)',
            fields: [
              { label: 'Elements', name: 'config.elements', type: 'checkboxes', options: [
                { value: 'metric', text: 't(Metric)' },
                { value: 'chart', text: 't(Chart)' }
              ], defaultValue: ['metric','chart'] },
              ..._.includes(elements, 'metric') ? [
                { label: 'Metric Color', name: 'config.metricColor', type: 'colorfield', defaultValue: '#000000', required: true }
              ] : [],
              ..._.includes(elements, 'chart') ? [
                { label: 'Chart Type', name: 'config.type', type: ChartField, include: ['area','line','bar'], defaultValue: 'area', required: true },
                { label: 'Axis Color', name: 'config.axisColor', type: 'colorfield', defaultValue: '#000000', required: true },
                { label: 'Label Color', name: 'config.labelColor', type: 'colorfield', defaultValue: '#404040', required: true },
                ...type === 'bar' ? [
                  { label: 'Bar Color', name: 'config.barColor', type: 'colorfield', defaultValue: '#DB2828', required: true }
                ] : [
                  { label: 'Line Color', name: 'config.lineColor', type: 'colorfield', defaultValue: '#DB2828', required: true }
                ],
                ...type !== 'bar' ? [
                  { label: 'Line Tension', name: 'config.tension', type: 'radiogroup', options: [
                    { value: 'smooth', text: 't(Smooth)' },
                    { value: 'rigid', text: 't(Rigid)' }
                  ], defaultValue: 'smooth' },
                  { label: 'Points', name: 'config.points', type: 'radiogroup', options: [
                    { value: 'show', text: 't(Show points)' },
                    { value: 'hide', text: 't(Hide points)' }
                  ], defaultValue: 'show', required: true }
                ] : []
              ] : []
            ]
          }
        ]
      }
    }
  
    _handleBack() {
      this.props.onBack()
    }
  
    _handleChange(config) {
      this.setState({ config })
    }
  
    _handleSubmit() {
      this.form.submit()
    }
  
    _handleSuccess(card) {
      this.props.onSave(card)
    }
  
  }
  
  export default Card
  