import React from 'react';
import {TextField} from "../../src/primitive-components/text-field/text-field";
import {Button} from "../../src/primitive-components/button/button";

export function TextFields(_props : any) {
    return (
        <div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection: "row", gap: "2em"}}>
            <div>
                <h1> Inputs </h1>
                <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                    <h2> Filled Inputs </h2>
                    <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
                        <div>
                            <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"}
                                                   required/>
                                        <Button variant={"filled"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"}
                                                   disabled/>
                                    </div>
                                </div>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   supportingText={"Supporting text"}/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"}
                                                   supportingText={"Supporting text"}
                                                   required/>
                                        <Button variant={"filled"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"}
                                                   supportingText={"Supporting text"}
                                                   disabled/>
                                    </div>
                                </div>
                            </div>
                            <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   withAfterIcon/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"}
                                                   withAfterIcon
                                                   required/>
                                        <Button variant={"filled"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"}
                                                   withAfterIcon
                                                   disabled/>
                                    </div>
                                </div>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   withAfterIcon
                                                   supportingText={"Supporting text"}/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"} withAfterIcon
                                                   supportingText={"Supporting text"}
                                                   required/>
                                        <Button variant={"filled"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"}
                                                   withAfterIcon
                                                   supportingText={"Supporting text"}
                                                   disabled/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   withBeforeIcon/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"}
                                                   withBeforeIcon
                                                   required/>
                                        <Button variant={"filled"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"}
                                                   withBeforeIcon
                                                   disabled/>
                                    </div>
                                </div>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   supportingText={"Supporting text"}
                                                   withBeforeIcon/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"}
                                                   supportingText={"Supporting text"}
                                                   withBeforeIcon
                                                   required/>
                                        <Button variant={"filled"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"}
                                                   supportingText={"Supporting text"}
                                                   withBeforeIcon
                                                   disabled/>
                                    </div>
                                </div>
                            </div>
                            <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   withBeforeIcon
                                                   withAfterIcon/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"}
                                                   withBeforeIcon
                                                   withAfterIcon
                                                   required/>
                                        <Button variant={"filled"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"}
                                                   withBeforeIcon
                                                   withAfterIcon
                                                   disabled/>
                                    </div>
                                </div>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   withBeforeIcon
                                                   supportingText={"Supporting text"}
                                                   withAfterIcon/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"}
                                                   withBeforeIcon
                                                   withAfterIcon
                                                   supportingText={"Supporting text"}
                                                   required/>
                                        <Button variant={"filled"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"filled"}
                                                   type={"email"}
                                                   withBeforeIcon
                                                   withAfterIcon
                                                   supportingText={"Supporting text"}
                                                   disabled/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <h1> Outlined </h1>
                <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                    <h2> Filled Inputs </h2>
                    <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
                        <div>
                            <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"}
                                                   required/>
                                        <Button variant={"outlined"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"}
                                                   disabled/>
                                    </div>
                                </div>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   supportingText={"Supporting text"}/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"}
                                                   supportingText={"Supporting text"}
                                                   required/>
                                        <Button variant={"outlined"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"}
                                                   supportingText={"Supporting text"}
                                                   disabled/>
                                    </div>
                                </div>
                            </div>
                            <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   withAfterIcon/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"}
                                                   withAfterIcon
                                                   required/>
                                        <Button variant={"outlined"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"}
                                                   withAfterIcon
                                                   disabled/>
                                    </div>
                                </div>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   withAfterIcon
                                                   supportingText={"Supporting text"}/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"} withAfterIcon
                                                   supportingText={"Supporting text"}
                                                   required/>
                                        <Button variant={"outlined"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"}
                                                   withAfterIcon
                                                   supportingText={"Supporting text"}
                                                   disabled/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   withBeforeIcon/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"}
                                                   withBeforeIcon
                                                   required/>
                                        <Button variant={"outlined"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"}
                                                   withBeforeIcon
                                                   disabled/>
                                    </div>
                                </div>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   supportingText={"Supporting text"}
                                                   withBeforeIcon/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"}
                                                   supportingText={"Supporting text"}
                                                   withBeforeIcon
                                                   required/>
                                        <Button variant={"outlined"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"}
                                                   supportingText={"Supporting text"}
                                                   withBeforeIcon
                                                   disabled/>
                                    </div>
                                </div>
                            </div>
                            <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   withBeforeIcon
                                                   withAfterIcon/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"}
                                                   withBeforeIcon
                                                   withAfterIcon
                                                   required/>
                                        <Button variant={"outlined"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"}
                                                   withBeforeIcon
                                                   withAfterIcon
                                                   disabled/>
                                    </div>
                                </div>
                                <div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   withBeforeIcon
                                                   supportingText={"Supporting text"}
                                                   withAfterIcon/>
                                    </div>
                                    <form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"}
                                                   withBeforeIcon
                                                   withAfterIcon
                                                   supportingText={"Supporting text"}
                                                   required/>
                                        <Button variant={"outlined"}
                                                type={"submit"}>
                                            Send
                                        </Button>
                                    </form>
                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                        <TextField variant={"outlined"}
                                                   type={"email"}
                                                   withBeforeIcon
                                                   withAfterIcon
                                                   supportingText={"Supporting text"}
                                                   disabled/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}