/*
    notification default messages -
    You can pass a default notification messages
*/
const  defaultDocumentMessages  = {
    onPostMessage: 'Created successfully',
    onPostFailedMessage: 'document - Created failed',
    onPutMessage: 'Update successfully',
    onPutFailedMessage: 'document - Update failed',
    onDeleteMessage: ' Deleted successfully',
    onDeleteFailedMessage: ' Deleted failed'
}

const langDir = 'ltr' // You can set 'rtl' or 'ltr'

/*
    document customTitle-
    You can pass a function that get a
    props and return the title to diaplay
    in the document header
*/
const  customTitle  =  function ({ state, props }) {
    const { data } =  state;
    const { objectId, schemaName, titleKey } =  props
    let  title  =  '';
    const  isNew  =  !objectId;
    if (isNew) {
    title  = `Create a New ${schemaName} document`
    } else {
    let  titleFromKey  = (titleKey  &&  data) ? data[titleKey] :  ''
    let  hasTitle  = titleFromKey.length
    title  = `Edit ${schemaName} document - ${hasTitle  ?  titleFromKey  :  objectId}`
}
return  title;
}

/*
    If you want to persist the user work when the page is full reload,
    we need an access to URL params, pass setParams and setParams
*/ se
const ar =   setParams  =  function (key, value) {
    const href  =  `${Router.pathname}?${key}=${value}`
    const  as  =  href
    Router.push(href, as, { shallow:  true })
}

import  Router  from  'next/router'; // You can use any Router service you want
 
const  getParams  =  function () {
    return  Router.query
}

import  React  from  'react';
import {CommonAdmin, fields} from  'react-common-admin'
 
const DocFields = [ // See react-cross-form
{
    key: 'firstName',
    label: 'First Name',
    validators: { presence: true, length: { minimum: 2 } },
    component: fields.TextInput
}]
 
const TableField = [
{ key: 'objectId',
  title: 'Object Id'
 },
 { key: 'firstName',
  title: 'First Name'
 }
]
export  default  class  Example  extends  React.Component {
render() {
    return (
        <div>
            <CommonAdmin
                schemaName='Example'
                targetName='ExampleScreen'
                title='Example Screen'
                documentProps={{
                    fields: DocFields, // Define this fields you want to render
                }}
                collectionProps={{
                    fields: TableField
                }}	
            />
        </div>
    );
}}

import MyDocView from './MyDocView'
...
return (
<CommonAdmin
    ...
    documentProps={{
        viewComponent: MyDocView 
    }}
    ...

import {Modal} from 'react-coomon-admin
...
return (
<CommonAdmin
    ...
    documentProps={{
        wrapper: Modal
    }}
    ...
/>

import Modal from './rect-some-modal-component'
 
class  MyDocWrapper extends  React.Component {
    render() {
        const {isOpen, onClose, modalId} =  this.props
        return(
            <Modal isOpen={isOpen} onClose={() => onClose(modalId)} >
                {children}
            </Modal>
        )
    }
}
 
export default class  MyScreen extends  React.Component {
    render() {
        return(
            <CommonAdmin
                ...
                documentProps={{
                    wrapper: MyDocWrapper
                }}
                ...
            />
        )
    },
    ... all other parameters from your documentProps configuration
}

const DocFields = [
    {
    key: 'title',
    label: 'Title',,
    component: TextInput,
    initialValue: 'The article title initialValue'
    },
    {
    key: 'body',
    label: 'Body',,
    component: TextInput,
    },
]
<CommonAdmin
    ...
    documentProps={{
    fields: DocFields,
    initialValue: {
        body: 'The article body initialValue'
    }
    }}

import MyTablView from './MyDocView'
...
return (
<CommonAdmin
    ...
    collectionProps={{
        viewComponent: MyTablView 
    }}
    ...

...
return (
<CommonAdmin
    ...
    collectionProps={{
        tableProps : {
            disabledDelete: true
        }
    }}
    ...

return (
<CommonAdmin
    collectionPops: {
        tableProps: {
            renderAddBtn: (props) => {
                return <button onClick={() => {
                    props.onCreateNewDoc()
                }}>Add</button>
            },
        }
...
/>

import {CommonAdmin, DraggableTable} from  'react-common-admin';
<CommonAdmin
...
    collectionProps={{
    ...
        viewComponent:  DraggableTable,
        tableProps: {
            orderKey:  'orderKey' // in this case each document in the DB contain orderKey key with value that help us render the view by a specific order
        // optional
        groups: ['related', 'child'], // render data in separate tables
        groupBy: 'relationType', // key to group value
            
        }
...

import React from 'react';
import {CommonAdmin, StaticDoc} from 'react-common-admin'
import {DocFields} from './config';
 
export default class Example extends React.Component {
  render() {
    return (
      <div>
        <CommonAdmin
          schemaName='Member'
          targetName='ProfileSettings'
          title='Profile Settings'
          showCollection={false} //--------------->!important
          documentProps={{
            fields: DocFields,
            objectId: 'eviegCusH8',
            wrapper: StaticDoc, //--------------->!important
            messages: {
              onPostMessage: 'Create successfully',
              onPostFailedMessage: 'Create failed',
              onPutMessage: 'Update successfully',
              onPutFailedMessage: 'Update failed):',
              onDeleteMessage: 'Deleted successfully',
              onDeleteFailedMessage: 'Deleted failed'
            },
            customTitle: ({objectId, data}) => { 'title' }
          }}
          fetchExtraData={[
            {schemaName: 'City', targetName: 'CityDropDown'},
          ]}
        />
      </div>
    );
  }
}
 

import {fields} from 'react-common-admin'

const {
    TextInput, NumberInput, MobileInput,
    UploadFile, DateTime, Pointer, DropDown,
    ObjectsDropDown, AddressAutoComplete,
    GeoLocationMapView, AddressWithMapView,
    Tags, ArrayOfPointer, ArrayOfPointerTableView, TextArea 
} =  fields;

{
    key:  'firstName',
    label:  'First Name',
    validators: { presence:  true, length: { minimum:  2 } },
    component:  fields.TextInput,
    helpText:  'Please tell as what is your name'
},

{
    key:  'info',
    label:  'Whe are you',
    component:  fields.TextArea,
    helpText:  'I am example of a textArea'
},

{
    key:  'mobile',
    label:  'Mobile',
    customValidation:  function (field, value) {
        let  errors  = []
        if(!value  ||  value  ===  '') {
        errors.push('can\'t be blank')
        } else  if(!isValidNumber(value)) {
        errors.push('Please enter a valid phone number')
        }
        return  errors
    },
    component:  fields.MobileInput,
},

{
    key:  'image',
    label:  'Image as Parse File Example',
    component:  fields.UploadFile,
    validators: { presence:  true }
},

{
    key:  'urlString', // Example how to upload an image an set a url string and not parse file object;
    label:  'Image - image as string example',
    component:  fields.UploadFile,
    validators: { presence:  true },
    fileValueHandler: (res) => {
        return  res.data.url
    }
},

{
key:  'imageFromMedia',
label:  'imageFromMedia - image as pointer to Media',
component:  fields.SelectFromMedia,
asPointer:  true,
validators: { presence:  true }
},

{
key:  'imageFromMediaAsString',
label:  'imageFromMediaAsString - image as string from Media',
component:  fields.SelectFromMedia,
validators: { presence:  true }
},

{
    key:  'age',
    label:  'Age - number input example',
    component:  fields.NumberInput,
},

{
    key:  'birthday',
    label:  'Birthday',
    component:  fields.DateTime,
},

{
    key:  'city',
    label:  'City - pointer fields example',
    component:  fields.Pointer,
    schemaName:  'City',
    targetName:  'CityDropDown',
    labelKey:  'name'
},

{
    key:  'roles',
    label:  'Roles',
    component:  fields.ArrayOfPointer,
    schemaName:  'City',
    targetName:  'CityDropDown',
    labelKey:  'name'
}

{
    key:  'cities',
    label:  'Cities',
    component:  fields.ArrayOfPointerTableView,
    schemaName:  'City',
    targetName:  'CityDropDown',
    labelKey:  'name'
},

{
    key:  'favoriteColor',
    label:  'Favorite Color - dropDown static options example - string value',
    component:  fields.DropDown,
    options: [
        {key: 'red', label: 'red'},
        {key: 'green', label: 'green'},
        {key: 'blue', label: 'blue'},
        {key: 'pink', label: 'pink', customRender: ({label}) =>  <p style={{color: 'pink'}}>{label}</p>},
    ]
}

{
    key:  'favoritePhone',
    label:  'Favorite Phone - dropDown static options example - object value',
    component:  fields.ObjectsDropDown,
    valueKey:  'model', // default is key
    labelKey:  'fullName', // default is label
    options: [
        {company:  'Samsung', OS:  'Android 8', model:  'Galaxy S9 Plus', fullName:  'Samsung Galaxy S9 Plus'},
        {company:  'Samsung', OS:  'Android 8', model:  'Galaxy S9', fullName:  'Samsung Galaxy S9'},
        {company:  'Huawei', OS:  'Android 8.1', model:  'P20 Pro', fullName:  'Huawei P20 Pro'},
    ]
},

{
    key:  'address',
    label:  'Address',
    component:  AddressAutoComplete,
    accessToken:  envConfig.MAP_BOX_ACCESS_TOKEN
},

{
    key:  'group-address',
    addressFieldKey:  'address',
    locationFieldKey:  'location',
    component:  AddressWithMapView,
    group: [
        {
        key:  'address',
        label:  'Address',
        component:  AddressAutoComplete,
        accessToken:  envConfig.MAP_BOX_ACCESS_TOKEN
        },
        {
        key:  'location',
        label:  'Location',
        component:  GeoLocationMapView,
        accessToken:  envConfig.MAP_BOX_ACCESS_TOKEN
        },
    ],
},

{
    key:  'tags',
    label:  'Tags',
    component:  Tags, // Good for array of string
    validators: { presence:  true, length: { minimum:  2 } },
    helpText:  'Set tags to help the search engine what you want in the future'
},

export  const  imgForamtter  =  function (cell, row, field, extraData) {
    if (cell  &&  cell.url) {
        return  <img  src={cell.url}  style={{width:  50, height:  50}}/>
    }
    return <p>No image</p>
}

import {formatters} from  'react-common-admin'

{
  key: 'objectId',
  title: 'Object Id',
  search: true
},

 
{
  key:  'image',
  title:  'Image',
  formatter:  formatters.imageFormatter
},

{
  key:  'partner',
  title:  'Account',
  formatter: (cell, row) => {
  	if(typeof  cell  ===  'object') {
  		const {objectId, name} =  cell
  		return <p>{name  ||  objectId}</p>;
  	}else{
  		return <p></p>
  	}
  },
},

{
  key:  'roles',
  title:  'Roles',
  formatter: formatters.arrayFormatter
}
 

{
    key:  'actionBtn',
    actionBtn:  true
 
onOrderChanged|funciton|
onPagination|funciton|
onQueryChanged|funciton|
tableProps|object| any props you want to pass to the viewComponent
### collention viewComponent props
------
```jsx
{
    fetchProps - see react-parse fetchProps 
    fields - array
    dataHandler - see react-parse dataHandler (clodeCode)
    extraData - all fetchExtraData results
    title - string
    onCreateNewDoc- function - call this and document modal will display, you can pass as first parameter any data you want and document will get this on props.dataFromCollection
    onEditDoc- function - call this with objectId and document modal will display to edit, you can pass as seconde parameter any data you want and document will get this on props.dataFromCollectio
    skip - number
    limit - number
    // function to call when you want to set a new value
    onLimitChanged: (limit: number) => {...}
    onSkipChanged: (skip: number) => {...}
    onOrderChanged: (order: string => {...}
    onQueryChanged: (query: object) => {...}
    onPagination: (page: number, pageSize: number) => {...}
    ... all other parameters from your collectionProps configuration
}

renderSelectTypeToAdd(res) {
const  productTypes  =  objDig(res, 'extraData.ProductType') || []
const  onSelect  = (menuItem) => {
res.onCreateNewDoc(menuItem.item.props.value)
}
return (
    <Dropdown 
        overlay={
            <Menu  onClick={onSelect}>
            {productTypes.map(item  => {
            return  <Menu.Item  key={item.objectId}  value={item}>{item.name}</Menu.Item>
            })}</Menu>
        }
        >
        <Button  style={{ marginLeft: 8 }}>
            Add <Icon  type="down" />
        </Button>
    </Dropdown>
)
}
...
...
<CommonAdmin
...
collectionPops: {
...
tableProps: {
renderAddBtn: this.renderSelectTypeToAdd,
}
...

import React from 'react';
import {CommonAdmin, StaticDoc} from 'react-common-admin'
import {DocFields} from './config';
 
export default class Example extends React.Component {
  render() {
    return (
      <div>
        <CommonAdmin
          schemaName='Member'
          targetName='ProfileSettings'
          title='Profile Settings'
          showCollection={false} //--------------->!important
          documentProps={{
            fields: DocFields,
            objectId: 'eviegCusH8',
            wrapper: StaticDoc, //--------------->!important
            messages: {
              onPostMessage: 'Create successfully',
              onPostFailedMessage: 'Create failed',
              onPutMessage: 'Update successfully',
              onPutFailedMessage: 'Update failed):',
              onDeleteMessage: 'Deleted successfully',
              onDeleteFailedMessage: 'Deleted failed'
            },
            customTitle: ({objectId, data}) => { 'title' }
          }}
          fetchExtraData={[
            {schemaName: 'City', targetName: 'CityDropDown'},
          ]}
        />
      </div>
    );
  }
}
 

import {CommonAdmin, DraggableTable} from  'react-common-admin';
<CommonAdmin
...
    collectionProps={{
    ...
        viewComponent:  DraggableTable,
        tableProps: {
            orderKey:  'orderKey' // in this case each document in the DB contain orderKey key with value that help us render the view by a specific order
        // optional
        groups: ['related', 'child'], // render data in separate tables
        groupBy: 'relationType', // key to group value
            
        }
...

import { fields, util } from  'react-common-admin';
export  const  DocFields  = [
    {
        key: 'code',
        label: 'Code',
        // validators: { presence: true, length: { minimum: 3 } },
        customValidation: function (field, value, data, formProps) {
        const  validators  = { presence: true, length: { minimum: 3 } };
        return util.validatorsAndIsUnique(validators, 'code', field, value, data, formProps)
        },
        component: TextInput
    },
    {
        key: 'name',
        label: 'Name',
        validators: { presence: true, length: { minimum: 2 } },
        component: TextInput
    },
]

// Option 1
// Sync by react-parse refresh collection
<CommonAdmin
    schemaName='ItemType'
    targetName={'ItemType-screen'}
    keepSyncByTargetName={['ItemType-sideBar']}