// developers.tsx
// Copyright (C) 2020  Dwayne Harris

// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.

// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.

// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <https://www.gnu.org/licenses/>.

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