import React from 'react';
import 'styles/layouts/{{{fileName}}}.scss';

import {getImageUrl, getVideoUrl, getFileUrl} from 'wch-flux-sdk';
import {WchContent} from 'wch-flux-sdk/react/wchContent'

export class {{{className}}} extends React.Component {

  render() {

    let contentId = this.props.renderingContext.id;
    {{#each elements}}
    let {{{prop}}} = this.props.renderingContext.elements.{{{prop}}};
    {{/each}}

    return (
      <div id={contentId} data-renderingcontext-id={contentId}>
        {{#each elements}}


        {{#is elementType "text"}}
        <div data-wch-inline-edit="elements.{{{prop}}}.value">{ {{{prop}}}.value }</div>
        {{/is}}

        {{#is elementType "number"}}
        <div data-wch-inline-edit="elements.{{{prop}}}.value">{ {{{prop}}}.value }</div>
        {{/is}}

        {{#is elementType "location"}}
        <div data-wch-inline-edit="elements.{{{prop}}}.value">Lat: { {{{prop}}}.latitude }, Long: { {{{prop}}}.longitude }</div>
        {{/is}}

        {{#is elementType "toggle"}}
        <div data-wch-inline-edit="elements.{{{prop}}}.value">{ {{{prop}}}.value ? "Toggle on": "Toggle off" }</div>
        {{/is}}

        {{#is elementType "datetime"}}
        <div data-wch-inline-edit="elements.{{{prop}}}.value">{ new Date({{{prop}}}.value).toLocaleDateString() } { new Date({{{prop}}}.value).toLocaleTimeString() }</div>
        {{/is}}

        {{#is elementType "formattedtext"}}
        <div data-wch-inline-edit="elements.{{{prop}}}.value" dangerouslySetInnerHTML=\{{__html: {{{prop}}}.value }}></div>
        {{/is}}

        {{#is elementType "link"}}
        <br/>
        <a data-wch-inline-edit="elements.{{{prop}}}.value" href={ {{{prop}}}.linkURL }>{ {{{prop}}}.linkText }</a>
        <br/>
        {{/is}}

        {{#is elementType "image"}}
        <img data-wch-inline-edit="elements.{{{prop}}}.value" src={getImageUrl({{{prop}}}, 'short', '')} title={ {{{prop}}}.title } alt={ {{{prop}}}.altText } style=\{{height:"100px"}} />
        {{/is}}

        {{#is elementType "video"}}
        <video data-wch-inline-edit="elements.{{{prop}}}.value" src={getVideoUrl({{{prop}}})} type={ {{{prop}}}.asset.mediaType } controls style=\{{height:"100px"}}></video>
        {{/is}}

        {{#is elementType "file"}}
        <a data-wch-inline-edit="elements.{{{prop}}}.value" href={ getFileUrl({{{prop}}}) }> { {{{prop}}}.asset.fileName }</a>
        {{/is}}

        {{#is elementType "reference"}}
        <br/>
        <WchContent data-wch-inline-edit="elements.{{{prop}}}.value" contentId={ {{{prop}}}.value.id }/>
        <br/>
        {{/is}}

        {{#is elementType "optionselection"}}
        <select>
            <option value="{{{prop}}}.selection">{ {{{prop}}}.value ? {{{prop}}}.value.selection : "no options available" }</option>
        </select>
        {{/is}}

        {{#is elementType "category"}}
        <ul data-wch-inline-edit="elements.{{{prop}}}.value">
        {
          {{{prop}}}.categories.map((c) =>
            <li>{c}</li>
          )
        }
        {
          {{{prop}}}.categoryIds.map((c) =>
            <li key={c}>{c}</li>
          )
        }
        </ul>
        {{/is}}


        {{/each}}
      </div>
    )   
  }
}