import React from 'react'
import PropTypes from 'prop-types'
import {FormattedValue, Typography} from 'tocco-ui'
import {FormattedMessage} from 'react-intl'
import {js} from 'tocco-util'
import _get from 'lodash/get'

const areEqual = (prevProps, nextProps) => {
  const diff = Object.keys(js.difference(prevProps, nextProps))
  return diff.length === 0
}

export const ManyRelationsCheckBox = React.memo(({entityData, entityKey, name, setSelectedMultipleAll, isSelected}) => {
  if (entityData.value.length === 0) {
    return null
  }

  const onChange = e => setSelectedMultipleAll(name, entityKey, e.target.checked)

  return <>
    <input type="checkbox" onChange={onChange} checked={isSelected} id={`${name}${entityKey}`}/>
    <Typography.Label for={`${name}${entityKey}`}>
      <FormattedMessage id="client.merge.allRelations"/> ({entityData.value.length})
    </Typography.Label>
  </>
}, areEqual)

ManyRelationsCheckBox.propTypes = {
  entityData: PropTypes.shape({
    value: PropTypes.arrayOf(PropTypes.string)
  }),
  entityKey: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  setSelectedMultipleAll: PropTypes.func.isRequired,
  isSelected: PropTypes.bool.isRequired
}

export const RelationsCheckBoxes = React.memo(({
  entityData,
  entityKey,
  name,
  setSelectedMultiple,
  selectedMultiple
}) => {
  return entityData.value.map(relationEntity => {
    const isSelected = _get(selectedMultiple, [name, relationEntity.key]) === entityKey
    const onChange = e => setSelectedMultiple(name, entityKey, relationEntity.key, e.target.checked)

    return <div key={`relation-checkbox-${relationEntity.key}`}>
      <input type="checkbox" onChange={onChange} checked={isSelected} id={`${name}${entityKey}-${relationEntity.key}`}/>
      <Typography.Label for={`${name}${entityKey}-${relationEntity.key}`}>
        <FormattedValue type="single-select" value={relationEntity}/>
      </Typography.Label>
    </div>
  })
}, areEqual)

RelationsCheckBoxes.propTypes = {
  entityData: PropTypes.shape({
    value: PropTypes.array
  }),
  entityKey: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  setSelectedMultiple: PropTypes.func.isRequired,
  selectedMultiple: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string))
}

export const FormattedValueRadio = React.memo(({entityData, entityKey, name, setSelectedSingle, isSelected}) => {
  const typeMapper = {
    entity: 'single-select'
  }

  const {type, writable} = entityData
  const mappedType = typeMapper[type] || type
  const onChange = () => {
    setSelectedSingle(name, entityKey)
  }

  return <>
    <input
      type="radio"
      name={name}
      onChange={onChange}
      checked={isSelected}
      id={`${name}${entityKey}`}
      disabled={!writable}/>
    <Typography.Label for={`${name}${entityKey}`}>
      <FormattedValue type={mappedType} value={entityData.value}/>
    </Typography.Label>
  </>
}, areEqual)

FormattedValueRadio.propTypes = {
  entityData: PropTypes.shape({
    value: PropTypes.any,
    writable: PropTypes.bool,
    type: PropTypes.string
  }),
  entityKey: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  setSelectedSingle: PropTypes.func.isRequired,
  isSelected: PropTypes.bool.isRequired
}

@@ -106,16 +106,59 @@
 cco-ui'%0A
+import %7Bfield%7D from 'tocco-app-extensions'%0A
 import %7B
@@ -2474,18 +2474,22 @@
 e-select
+-box
 '%0A
-
   %7D%0A%0A  c
@@ -2640,16 +2640,67 @@
 y)%0A  %7D%0A%0A
+  const Field = field.factory('list', mappedType)%0A%0A
   return
@@ -2929,28 +2929,43 @@
   %3CF
-ormattedValue type=%7B
+ield%0A        formField=%7B%7BdataType: 
 mapp
@@ -2971,16 +2971,25 @@
 pedType%7D
+%7D%0A       
  value=%7B
@@ -3005,16 +3005,23 @@
 a.value%7D
+%0A      
 /%3E%0A    %3C

use field factory