const el = wp.element.createElement;
const { registerBlockType } = wp.blocks;
const { RichText, InnerBlocks } = wp.blockEditor;

// COMPANY
registerBlockType('cv/company', {
    title: 'Company (CV)',
    icon: 'building',
    category: 'layout',

    attributes: {
        name: { type: 'string', default: '' },
        dates: { type: 'string', default: '' }
    },

    edit: ({ attributes, setAttributes }) =>
        el('div', { className: 'cv-company' },

            el(RichText, {
                tagName: 'div',
                className: 'cv-company-name',
                placeholder: 'Company Name',
                value: attributes.name,
                onChange: val => setAttributes({ name: val })
            }),

            el(RichText, {
                tagName: 'div',
                className: 'cv-company-dates',
                placeholder: 'Years (e.g. 2020 - 2024)',
                value: attributes.dates,
                onChange: val => setAttributes({ dates: val })
            }),

            el(InnerBlocks, {
                allowedBlocks: ['cv/position'],
                template: [['cv/position']]
            })
        ),

    save: ({ attributes }) =>
        el('div', { className: 'cv-company' },
            el('div', { className: 'cv-company-name' }, el('strong', null, attributes.name)),
            el('div', { className: 'cv-company-dates' }, attributes.dates),
            el(InnerBlocks.Content, null)
        )
});

// POSITION
registerBlockType('cv/position', {
    title: 'Position (CV)',
    icon: 'id',
    parent: ['cv/company'],
    category: 'layout',

    attributes: {
        title: { type: 'string', default: '' },
        department: { type: 'string', default: '' },
        dates: { type: 'string', default: '' }
    },

    edit: ({ attributes, setAttributes }) =>
        el('div', { className: 'cv-position' },

            el(RichText, {
                tagName: 'div',
                className: 'cv-position-title',
                placeholder: 'Job Title',
                value: attributes.title,
                onChange: val => setAttributes({ title: val })
            }),

            el(RichText, {
                tagName: 'div',
                className: 'cv-position-department',
                placeholder: 'Department',
                value: attributes.department,
                onChange: val => setAttributes({ department: val })
            }),

            el(RichText, {
                tagName: 'div',
                className: 'cv-position-dates',
                placeholder: 'Period',
                value: attributes.dates,
                onChange: val => setAttributes({ dates: val })
            }),

            el(InnerBlocks, {
                allowedBlocks: ['core/list'],
                template: [['core/list']]
            })
        ),

    save: ({ attributes }) =>
        el('div', { className: 'cv-position' },
            el('div', { className: 'cv-position-title' }, el('strong', null, attributes.title)),
            el('div', { className: 'cv-position-department' }, attributes.department),
            el('div', { className: 'cv-position-dates' }, attributes.dates),
            el(InnerBlocks.Content, null)
        )
});