import * as React from 'react';
import ToolbarItem from "./ToolbarItem";
import { FieldTypes } from "../Enums";
import { Field } from '../Models';

let items: any[] = [
    {
        type: FieldTypes.Header,
        key: 'Header',
        name: 'Header Text',
        displayName: 'This Is A Header',
        icon: 'ms-Icon ms-Icon--Header1'
    },
    {
        type: FieldTypes.Label,
        key: 'Label',
        name: 'Label',
        icon: 'ms-Icon ms-Icon--HalfAlpha',
        displayName: 'Label'
    },
    {
        type: FieldTypes.Paragraph,
        key: 'Paragraph',
        name: 'Paragraph',
        icon: 'ms-Icon ms-Icon--BidiRtl',
        displayName: 'Paragraph'
    },
    {
        type: FieldTypes.Text,
        key: 'TextInput',
        name: 'Text Input',
        displayName: 'Label',
        icon: 'ms-Icon ms-Icon--InsertTextBox',
        placeHolder: 'Placeholder'

    },
    {
        type: FieldTypes.Multiline,
        key: 'TextArea',
        name: 'Multi-line Input',
        displayName: 'Multi-line Input',
        icon: 'ms-Icon ms-Icon--RawSource'

    },
    {
        type: FieldTypes.SingleChoice,
        key: 'Dropdown',
        name: 'Dropdown',
        icon: 'ms-Icon ms-Icon--Dropdown',
        displayName: 'Dropdown',
        options: []
    },
    {
        type: FieldTypes.MultipleChoice,
        key: 'Checkboxes',
        name: 'Checkboxes',
        icon: 'ms-Icon ms-Icon--BoxCheckmarkSolid',
        displayName: 'Checkboxes',
        options: []
    },
    {
        type: FieldTypes.Image,
        key: 'Image',
        name: 'Image',
        displayName: 'Example implementation with no image fit property and only width is specified.',
        icon: 'ms-Icon ms-Icon--Photo2'
    },
    {
        type: FieldTypes.Date,
        key: 'DatePicker',
        canDefaultToday: true,
        canReadOnly: true,
        name: 'Date Picker',
        icon: 'ms-Icon ms-Icon--DateTime',
        displayName: 'Select a date...',

    },
    {
        type: FieldTypes.Currency,
        key: 'Currency',
        name: 'Currency',
        displayName: 'Currency',
        icon: 'ms-Icon ms-Icon--Money',
        placeHolder: 'Currency'
    },
    {
        type: FieldTypes.Percentage,
        key: 'Percentage',
        name: 'Percentage',
        displayName: 'Percentage',
        icon: 'ms-Icon ms-Icon--Chart',
        placeHolder: 'Percentage'
    },

    {
        type: FieldTypes.Number,
        key: 'NumberInput',
        name: 'Number',
        displayName: 'Number',
        icon: 'ms-Icon ms-Icon--NumberField',
        placeHolder: 'Number input'
    },
    {
        type: FieldTypes.Boolean,
        key: 'RadioButtons',
        name: 'Pick One',
        icon: 'ms-Icon ms-Icon--Completed',
        displayName: 'Pick one',
    },
    {
        type: FieldTypes.Document,
        key: 'Document',
        name: 'Document',
        icon: 'ms-Icon ms-Icon--Document',
        displayName: 'Document',
    },
    {
        type: FieldTypes.Callout,
        key: 'Callout',
        name: 'Callout',
        icon: 'ms-Icon ms-Icon--Chat',
        displayName: 'Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.',
    },
    {
        type: FieldTypes.EntityReference,
        key: 'EntityReference',
        name: 'Entity Reference',
        icon: 'ms-Icon ms-Icon--BranchCompare',
        displayName: 'Entity Reference',
        referencedEntityId:0
    },
    {
        type: FieldTypes.User,
        key: 'User',
        name: 'User',
        icon: 'ms-Icon ms-Icon--Dropdown',
        displayName: 'User',
        options: []
    },
    {
        type: FieldTypes.MultipleDocuments,
        key: 'MultipleDocuments',
        name: 'MultipleDocuments',
        icon: 'ms-Icon ms-Icon--Document',
        displayName: 'Multiple Documents',
    },
    {
        type: FieldTypes.Html,
        key: 'Html',
        name: 'Html Input',
        displayName: 'Html Input',
        icon: 'ms-Icon ms-Icon--RawSource'

    }   
]

export class Toolbar extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            items: items,
        };
    }

    public render() {
        return (
            <div className="ms-Grid-col" style={{borderRight:'1px solid #ddd'}}>
                <div className="react-form-builder-toolbar" >
             
                    <ul>
                        {
                            this.state.items.map((item: any) => {
                                return <ToolbarItem data={item} key={item.key} onClick={this._onClick.bind(this, item, -1)} />;
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }
    _onClick(item: Field, index: any) {

        let clonedItem = {
            type: item.type,
            name: item.name,
            displayName: item.displayName,
            referencedEntityId:item.referencedEntityId,
            allowNull:true}
        this.props.callbackFromParent(clonedItem, index);
    };
    _guid() {
        function s4() {
            return Math.floor((1 + Math.random()) * 0x10000)
                .toString(16)
                .substring(1);
        }
        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
    }
};