import Box from "@mui/material/Box";
import {FormControl, SxProps, TextField, Theme, Typography} from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import Button from "@mui/material/Button";
import * as React from "react";

interface Props {
    outerContainerSx?: SxProps<Theme>;
    children?: React.ReactNode;
    defaultValue?: string;
    placeholderHelp: string;
    placeholderField: string;
}

export default function NewFieldParent ({defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children}: Props) {
    return(
        <Box sx={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px'}}>
            <Box sx={{display: 'flex', flexDirection: 'column', gap: '15px'}}>
                <Typography>Подсказка</Typography>
                <CustomTextField placeholder={placeholderHelp} text={''}/>
            </Box>
            <Box sx={{display: 'flex', flexDirection: 'column', gap: '15px'}}>
                <Typography>Подсказка внутри поля</Typography>
                <CustomTextField placeholder={placeholderField} text={''}/>
            </Box>
            <Box sx={{display: 'flex', flexDirection: 'column', gap: '15px'}}>
                <Typography>Ключ</Typography>
                <FormControl
                    fullWidth
                    variant="standard"
                    sx={{ p: 0, border: 0 }}
                >
                    <TextField
                        disabled
                        id="outlined-disabled"
                        value={defaultValue}
                        sx={{
                            "& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
                                border: 'none'
                            },
                            "& .MuiInputBase-root": {
                                height: "48px",
                                borderRadius: "10px",
                                backgroundColor: '#EEE4FC',
                            },
                        }}
                    />
                </FormControl>
                <CustomCheckbox label={"Обязательно к заполнению"}/>
            </Box>
            <Box>
                <Typography>Запрашивать на</Typography>
                <CustomCheckbox label={'Шаг 1'}/>
                <CustomCheckbox label={'Шаг 2'}/>
            </Box>
            {children}
            <Button variant='contained' sx={{maxWidth: '125px'}}>Добавить</Button>
        </Box>
    )
}
