import React, { useState } from 'react';
import CMS, { init } from 'netlify-cms';

const config = {
    backend: {
        name: 'github'
        repo: 'schalkventer/netlify-cms-hello-world'
    },
    media_folder: 'src/assets/media',
    public_folder: 'media',
    collections: {
        name: 'posts',
        label: 'Blog Posts',
        folder: 'src/data/posts',
        extension: 'md',
        create: 'true',
        fields: [
            {
                name: 'title',
                label: 'Post title',
                widget: 'string',
            },
            {
                name: 'icon',
                label: 'Post type',
                widget: 'icon-selector'
            },
            {
                name: 'content',
                label: 'Blog Content',
                widget: 'Markdown',
            },
        ]
    },
    {
        name: 'members',
        label: 'Cult Members',
        folder: 'src/data/authors',
        extension: 'json',
        create: 'true',
        fields: [
            {
                name: 'title',
                label: 'Member name',
                widget: 'string',
            },
            {
                name: 'age',
                label: 'Age',
                widget: 'number',
            },
            {
                name: 'profession',
                label: 'Member profession',
                widget: 'string',
            },
            {
                name: 'hobby',
                label: 'Member hobby',
                widget: 'string',
            },
            {
                name: 'status',
                label: 'Membership status',
                widget: 'select',
                options: ['pending member', 'previous member', 'registered member'],
            },
            {
                name: 'photo',
                label: 'Profile photo',
                widget: 'image',
                required: 'false',
                hint: 'Remember to stare straight at the camera',
            },
        ]
    }
}

const IconWidgetMarkup = ({ value, handleChange }) => (
    <div onChange={handleChange}>
        <input type="radio" name="icon" value="house"><svg ... />
        <input type="radio" name="icon" value="tree"><svg ... />
        <input type="radio" name="icon" value="car"><svg ... />
    </div>
);

const IconWidgetState = () => {
    const handleChange = (event) => this.props.onChange(event.target.value);
    return <Markup value={this.props.value} handleChange={handleChange} />;
}

const MemberPagePreview= ({ entry, getAsset ) => {
    const name = entry.getIn(['data', 'title']);
    const photo = entry.getIn(['data', 'photo']);
    const photoUrl = getAsset(photo);
    const status = entry.getIn(['data', 'status'])

    return (
        <div>
            <h1>{name}</h1>
            <img src={photoUrl} />
            <span>{status}</span>
        </div>
    )
};

CMS.registerWidget('icon-selector', IconWidgetMarkup , IconWidgetState);
CMS.registerPreviewTemplate("members", MemberPagePreview);
init({ config });

title: README.fm
icon: house
author: shailen-naidoo
---

**A podcast aimed at bridging the gap between people and technology for social good**

[Check it out](soundcloud.com/readme-fm)

└── src
   └── data
      ├── blog
      │  ├── ...
      │  └── readme-fm.md
      └── authors
         ├── ...
         └── shailen-naidoo.json

{
    "title": "Shailen Naidoo",
    "age": 20,
    "profession": "web developer",
    "hobby": "guitarist",
    "status": "registered member",
    "photo": "/photos/shailen-naidoo.jpeg"
}