import React, {useState} from "react";
import "./Example.css";
import "react-design-system-docaposte/dist/index.css";
import {
    Button,
    ButtonLink,
    Card,
    Text,
    Input,
    Loader,
    Modal,
    Alert
} from "react-design-system-docaposte";

const Example = () => {

    const [modalOpen, setModalOpen]           = useState(false);
    const [alertDisplayed, setAlertDisplayed] = useState(true);

    return <div>

        <h1 id={"title"}>React design system Docaposte</h1>

        {/* Text */}
        <figure>
            <h2>{"<Text/>"}</h2>
            <Text.H1>This is a title h1</Text.H1>
            <Text.H2>This is a title h2</Text.H2>
            <Text.H3>This is a title h3</Text.H3>
            <Text.H4>This is a title h4</Text.H4>
            <Text.H5>This is a title h5</Text.H5>
            <Text.Subtitle1>This is a subtitle 1</Text.Subtitle1>
            <Text.Subtitle2>This is a subtitle 2</Text.Subtitle2>
            <Text.Body1>This is a body text 1</Text.Body1>
            <br/>
            <Text.Body2>This is a body text 2</Text.Body2>
            <br/>
            <br/>
            <Text.Caption>This is a caption text</Text.Caption>
            <br/>
            <Text.Error>This is a error text</Text.Error>
        </figure>

        <hr/>

        {/* Button */}
        <figure>
            <h2>{"<Button/>"}</h2>
            <Button>Simple button</Button>
            <br/>
            <br/>
            <Button icon={<img src="https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt=""/>}>Button with icon</Button>
            <br/>
            <br/>
            <Button loading={true}>Button with loader</Button>
            <br/>
            <br/>
            <Button disabled={true}>Button disabled</Button>
            <br/>
            <br/>
            <Button size={"thin"}>Master button</Button>
            <br/>
            <br/>
            <Button size={"thin"} icon={<img src="https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt=""/>}>Master button with icon</Button>
            <br/>
            <br/>
            <Button size={"thin"} loading={true}>Matser button with loader</Button>
            <br/>
            <br/>
            <Button size={"thin"} disabled={true}>Master button disabled</Button>
            <br/>
            <br/>
            <Button theme={"secondary"}>Secondary button</Button>
            <br/>
            <br/>
            <Button theme={"ghost"}>Ghost button</Button>
        </figure>

        <hr/>

        {/* Link */}
        <figure>
            <h2>{"<ButtonLink/>"}</h2>
            <    ButtonLink  type={"button"}>Button Link</ButtonLink>
            <br/>
            <br/>
            <    ButtonLink asLink={true} href={"#"}>Button as link</ButtonLink>
            <br/>
            <br/>
            <    ButtonLink type={"button"} disabled={true}>Button Link disabled</ButtonLink>
            <br/>
            <br/>
            <    ButtonLink asLink={true} href={"#"} disabled={true}>Button as link disabled</ButtonLink>
        </figure>

        <hr/>

        {/* Input */}
        <figure>
            <h2>{"<Input/>"}</h2>
            <Input id={"ExampleInput1"} label={"Example input with label"}/>
            <Input id={"ExampleInput2"} label={"Example input with info label"}
                   toolTip={"Um saepe multa, tum memini domi in hemicyclio sedentem, ut solebat, cum et ego essem una et pauci admodum familiares, in eum sermonem"}/>
            <Input id={"ExampleInput3"} placeholder={"Example input with Placeholder"}/>
            <Input id={"ExampleInput4"} placeholder={"Example disabled"} disabled/>
            <Input id={"ExampleInput5"} error={"Example error message"}/>

        </figure>

        <hr/>

        {/* Card */}
        <figure>
            <h2>{"<Card/>"}</h2>
            <Card alignItem={"left"}>
                <Text.H2>This is a card</Text.H2>
                <p>Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. is in Brittanniam missus ut militares
                    quosdam
                    perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages
                    multiplices ac
                    ruinas, vinculis membra ingenuorum adfligens et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod
                    Constanti
                    tempus nota inusserat sempiterna.</p>
            </Card>
        </figure>

        <hr/>

        {/* Loader */}
        <figure>
            <h2>{"<Loader/>"}</h2>
            <Loader size={14}/>
            <span> </span>
            <Loader size={14} color={"blue"}/>
            <span/>
            <Loader/>
            <span> </span>
            <Loader color={"blue"}/>
            <span> </span>
            <Loader size={48}/>
            <span> </span>
            <Loader size={48} color={"blue"}/>
        </figure>

        <hr/>

        {/* Modal */}
        <figure>
            <h2>{"<Modal/>"}</h2>
            <Button type={"button"} onClick={setModalOpen.bind(null, true)}>Open modal</Button>
            <Modal open={modalOpen} onClose={setModalOpen.bind(null, false)}>
                <Text.H3>Test modal title</Text.H3>
                <p>Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et
                    Vrsicinum
                    primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma
                    minantium
                    impetus frangerentur.</p>
            </Modal>
        </figure>

        <hr/>

        {/* Alert */}
        <figure>
            <h2>{"<Alert/>"}</h2>
            <Alert displayed={alertDisplayed} closable={true} onClose={setAlertDisplayed.bind(null, false)}>
                Example alert success closable
            </Alert>

            <Alert theme={"info"}>
                Example alert info
            </Alert>

            <Alert theme={"warning"}>
                Example alert warning
            </Alert>

            <Alert theme={"error"}>
                Example alert error
            </Alert>

            <Alert fullWidth={true}>
                Example alert success full width
            </Alert>

            <Alert theme={"info"} fullWidth={true}>
                Example alert info full width
            </Alert>

            <Alert theme={"warning"} fullWidth={true}>
                Example alert warning full width
            </Alert>

            <Alert theme={"error"} fullWidth={true}>
                Example alert error full width
            </Alert>
        </figure>

        <footer>Copyright © 2020 <a href="https://www.eukles.com" target={"_blank"} rel="noopener noreferrer">Eukles Solution</a></footer>
    </div>
}

export default Example