// schemas/muxCta.js 
import { IoIosRocket as icon } from 'react-icons/io'

export default {
  name: 'muxCta',
  title: 'CTA',
  type: 'object',
  icon,
  fields: [
    {
      name: 'text',
      title: 'Text',
      description: 'This is the text that will show on the button',
      type: 'string',
    },
    {
      name: 'href',
      title: 'Href',
      description: 'This is the URL for the button',
      type: 'string',
    },
  ],
}

// schemas/blockContent.js

import React from 'react'
import { FaVideo as videoIcon } from 'react-icons/fa'


const h1Styles = {
  fontSize: '28px',
  lineHeight: 1.1,
  marginTop: 0,
  marginBottom: 0,
}
const h2Styles = {
  fontSize: '21px',
  lineHeight: 1.3,
  marginTop: 0,
  marginBottom: 0,
}

const H1Style = props => <h1 style={h1Styles}>{props.children}</h1>
const H2Style = props => <h2 style={h2Styles}>{props.children}</h2>

export default {
  title: 'Simple block content',
  name: 'simpleBlockContent',
  type: 'array',
  of: [
    {
      title: 'Block',
      type: 'block',
      // Styles let you set what your user can mark up blocks with. These
      // correspond with HTML tags, but you can set any title or value
      // you want and decide how you want to deal with it where you want to
      // use your content.
      lists: [
        { title: 'Bullet', value: 'bullet' },
        { title: 'Number', value: 'number' },
        ],
      styles: [
        { title: 'H1', value: 'h1', blockEditor: { render: H1Style } },
        { title: 'H2', value: 'h2', blockEditor: { render: H2Style } },
      ],
      // Marks let you mark up inline text in the block editor.
      marks: {
        // Decorators usually describe a single property - e.g. a typographic
        // preference or highlighting by editors.
        decorators: [
          { title: 'Strong', value: 'strong' },
          { title: 'Emphasis', value: 'em' },
          { title: 'Code', value: 'code' },
          { title: 'Underline', value: 'underline' },
          { title: 'Strike', value: 'strike-through' },
        ],
        // Annotations can be any object structure - e.g. a link or a footnote.
        annotations: [
          {
            name: 'link',
            type: 'object',
            title: 'URL',
            fields: [
              {
                title: 'URL',
                name: 'href',
                type: 'url',
                validation: Rule =>
                  Rule.uri({
                    scheme: ['http', 'https', 'mailto'],
                    allowRelative: true,
                  }),
              },
            ],
            blockEditor: {
              render: props => <span>{props.children}</span>,
            },
          },
        ],
      },
      },
    {
      title: 'Mux Video',
      type: 'mux.video',
      icon: videoIcon,
    },
    {
      type: 'muxCta',
    },

    /*
     add all the custom types here
      {
      },
      {
      }
    */
  ],
}

import jsdom from 'jsdom'
import ndjson from 'ndjson'
import blockTools from '@sanity/block-tools'
import Schema from '@sanity/schema'
import types from '../../schemas/types'

const { JSDOM } = jsdom

const ndSerialize = ndjson.serialize()
let ndJsonLines = ''
ndSerialize.on('data', line => (ndJsonLines += `${line}`))
const writeJson = obj => ndSerialize.write(obj)

const rootSchema = Schema.compile({
  name: 'Mux CMS',
  types,
})
const bodyContentType = rootSchema
  .get('post')
  .fields.find(field => field.name === 'body').type

// This is a simplified version of processPost - we take a JSON object
// that is a 'post' from the Ghost archive and turn it into a 'post' in 
// sanity's world
async function processPost(post) {
  const {
    html,
    meta_title,
    meta_description,
    published_at,
  } = post
  // Take html and converts it into the data structure for a post 'body'
  const body = await convertHtmlToBlock(html)
  writeJson({
    _id: `post-${post.uuid}`,
    _type: 'post',
    title,
    slug: { _type: 'slug', current: slug },
    seoTitle: meta_title || undefined,
    seoDescription: meta_description || undefined,
    body,
    publishedAt: published_at,
  })
}


// this function takes in html and returns the structured block content that Sanity expects
// we hook into the `deserialize` function and return custom types
// one example is how w
async function convertHtmlToBlock(html) {
  return blockTools.htmlToBlocks(html, bodyContentType, {
    parseHtml: html => {
      return new JSDOM(html).window.document
    },
    rules: [
      {
        deserialize(el, next, block) {
          // This is an example of over-riding the 'pre' tag in our
          // html and returning a custom 'codeBlock' type
          if (el.tagName.toLowerCase() === 'pre')
            return block({
              _type: 'codeBlock',
              language: 'text',
              codeContent: el.textContent,
            })
          // This is an example of over-riding the 'iframe' tag in our html, detecting
          // that the src is a github gist, then returning the custom '_type' for 'githubGist'
          if ((el.tagName.toLowerCase() === 'iframe') && el.src.match(/gist.github.com/))
            const GIST_ID_RX = /gist.github.com\/.*\/(\w+)\.js/
            const matches = el.src.match(GIST_ID_RX)
            const gistId = matches && matches[1]
            if (!gistId) {
              console.log('Error - unable to find gistId for src', el.src)
              return undefined
            }
            const urlParts = qs.parseUrl(el.src)
            return block({
              _type: 'gistEmbed',
                           gistId,
              filename: urlParts.query.file || undefined,
            })
          return undefined
        },
      },
    ],
  })
}

// sanity.json
{
   "name": "part:@sanity/desk-tool/structure",
   "path": "./deskStructure/index.js"
}

// deskStructure/index.js
import S from '@sanity/desk-tool/structure-builder'
import { FiEdit3 as EditIcon } from 'react-icons/fi'
import { FiEye as PreviewIcon } from 'react-icons/fi'
import { GoBrowser as SeoIcon } from 'react-icons/go'
import WebPreview from './previews/WebPreview'
import SeoPreviews from './previews/seo/SeoPreviews'

const previewUrl = 'https://your-preview-url.is'

export const getDefaultDocumentNode = ({ schemaType }) => {
  if (schemaType === 'post') {
    return S.document().views([
      S.view.form().icon(EditIcon),
      S.view
        .component(WebPreview)
        .options({ previewUrl: `${previewUrl}/blog/` })
        .title('Web Preview')
        .icon(PreviewIcon),
      S.view
        .component(SeoPreviews)
        .title('SEO')
        .icon(SeoIcon),
    ])
  }
  return S.document().views([S.view.form()])
}

export default () =>
  S.list()
    .title('Content')
    .items([...S.documentTypeListItems()])

// sanity.json
{
  "implements": "part:@sanity/base/brand-logo",
  "path": "./logo/myLogo.js"
},
{
  "implements": "part:@sanity/base/theme/variables/override-style",
  "path": "./styles/variables.css"
}

// styles/variables.css
//
// find more variables on github https://github.com/sanity-io/sanity/tree/master/packages/%40sanity/base/src/styles/variables
// @import url(''");

:root {
  /* Brand colors */
  --brand-primary: #FF2B61;
  --brand-secondary--inverted: #383838;
  /* Typography */
  --font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-size-base: 16px;
  --text-color: var(--brand-secondary--inverted);
}