import React, { FC, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { useHistory } from 'react-router-dom'
import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'

import { fetchCreatedApps } from '../../actions/apps'
import { getCreatedApps } from '../../selectors/apps'
import { setTitle } from '../../utils'
import { AppThunkDispatch } from '../../types'

import Title from '../../components/title'
import Subtitle from '../../components/subtitle'
import Section from '../../components/section'
import HorizontalRule from '../../components/horizontal-rule'
import PrimaryButton from '../../components/controls/primary-button'

const Developers: FC = () => {
    const apps = useSelector(getCreatedApps)
    const history = useHistory()
    const dispatch = useDispatch<AppThunkDispatch>()

    useEffect(() => {
        setTitle('Developers')
        dispatch(fetchCreatedApps())
    }, [])
    
    return (
        <div>
            <Section>
                <Title>Developers</Title>
                <Subtitle>Developer Documentation</Subtitle>
                <HorizontalRule />

                <p>Flexor Apps let Users post stuff to the service.</p>
                <p>Each App has two parts:</p>

                <Subtitle>Composer</Subtitle>

                <p>The Composer is the interface for creating a post. It can be anything that results in a post object being made.</p>

                <p>
                    The <strong>composerURL</strong> field of an app should point to an HTML page that will be rendered in an iFrame in the Flexor app.
                    Communication between the Composer page and the Flexor app is done via Javascript <strong>postMessage</strong> messages.
                </p>

                <Subtitle>Renderer</Subtitle>

                <p>
                    The Renderer is the interface for displaying a post.
                    This is only used on the view Post page and is optional.
                    The default Flexor renderer is used when displaying a post elsewhere or when the <strong>rendererURL</strong> field is empty.
                </p>

                <p>
                    The <strong>rendererURL</strong> field of an app should point to an HTML page that will be rendered in an iFrame in the Flexor app.
                </p>

                <HorizontalRule />

                <PrimaryButton text="Create a new App" icon={faPlusCircle} onClick={() => history.push('/developers/create')} />
            </Section>
        </div>
    )
}

export default Developers