import React from "react";
import {Button, Checkbox, Grid, GridItem, HStack, Image, Stack, Text, Textarea,} from "@chakra-ui/react";
import {CustomInput, CustomSelect} from "./CustomComponents";
import {uploadIcon} from "../../images";

const SlidesTab = () => {
    return (
        <>
            <Grid w="850px" h="auto" templateColumns="repeat(5, 1fr)" gap={4}>
                <GridItem colSpan={2}>
                    <Stack w="100%" spacing={"12px"}>
                        <Text
                            fontFamily="MaisonBook"
                            color="#9FA2B4"
                            fontSize="12px"
                            fontStyle="normal"
                            fontWeight="400"
                            lineHeight="16px"
                            letterSpacing="0.20000001192092896px"
                            textAlign="left"
                        >
                            Poster Image
                        </Text>
                        <Stack
                            alignItems={"center"}
                            justifyContent={"center"}
                            bg="transparent"
                            h="423px"
                            w="260px"
                            borderRadius="8px"
                            border="1px solid #DFE0EB"
                        >
                            <HStack spacing={"12px"}>
                                <Image src={uploadIcon}/>
                                <Text
                                    fontFamily="MaisonBold"
                                    color="#B0B1B5"
                                    fontSize="14px"
                                    fontStyle="normal"
                                    fontWeight="700"
                                    lineHeight="14px"
                                    letterSpacing="0.50000001192092896px"
                                >
                                    Upload File
                                </Text>
                            </HStack>
                        </Stack>
                    </Stack>
                </GridItem>
                <GridItem colSpan={3}>
                    <Stack spacing={"32px"} minWidth={"445px"}>
                        <CustomSelect
                            title="Text Alignment"
                            OnChange={(e: any) => {
                                console.log(e.target.value);
                            }}
                        />

                        <Stack w="100%" spacing={"12px"}>
                            <Text
                                fontFamily="MaisonBook"
                                color="#9FA2B4"
                                fontSize="12px"
                                fontStyle="normal"
                                fontWeight="400"
                                lineHeight="16px"
                                letterSpacing="0.20000001192092896px"
                                textAlign="left"
                            >
                                Label
                            </Text>
                            <Textarea
                                fontFamily="MaisonBold"
                                color="#051E61"
                                fontSize="14px"
                                fontStyle="normal"
                                fontWeight="700"
                                lineHeight="14px"
                                letterSpacing="0.50000001192092896px"
                                bg="white"
                                h="128px"
                                borderRadius="8px"
                                border="1px solid #DFE0EB"
                            />
                        </Stack>
                        <HStack w="100%" spacing={"12px"}>
                            <Text
                                fontFamily="MaisonBook"
                                color="#9FA2B4"
                                fontSize="12px"
                                fontStyle="normal"
                                fontWeight="400"
                                lineHeight="16px"
                                letterSpacing="0.20000001192092896px"
                                textAlign="left"
                            >
                                Additional CTA
                            </Text>
                            <Checkbox bg="white"/>
                        </HStack>
                        <CustomInput
                            title="CTA title"
                            OnChange={(e: any) => {
                                console.log(e.target.value);
                            }}
                        />
                        <Stack w="100%" spacing={"12px"}>
                            <Text
                                fontFamily="MaisonBook"
                                color="#9FA2B4"
                                fontSize="12px"
                                fontStyle="normal"
                                fontWeight="400"
                                lineHeight="16px"
                                letterSpacing="0.20000001192092896px"
                                textAlign="left"
                            >
                                Poster Image
                            </Text>
                            <Stack
                                alignItems={"center"}
                                justifyContent={"center"}
                                bg="transparent"
                                h="128px"
                                borderRadius="8px"
                                border="1px solid #DFE0EB"
                            >
                                <HStack spacing={"12px"}>
                                    <Image src={uploadIcon}/>
                                    <Text
                                        fontFamily="MaisonBold"
                                        color="#B0B1B5"
                                        fontSize="14px"
                                        fontStyle="normal"
                                        fontWeight="700"
                                        lineHeight="14px"
                                        letterSpacing="0.50000001192092896px"
                                    >
                                        Upload Video
                                    </Text>
                                </HStack>
                            </Stack>
                        </Stack>
                        <CustomInput
                            title="Publish Date"
                            OnChange={(e: any) => {
                                console.log(e.target.value);
                            }}
                        />
                    </Stack>
                </GridItem>
                <GridItem pt="32px" colSpan={5}>
                    <HStack
                        borderTop={"1px solid #DFE0EB"}
                        py="32px"
                        justifyContent="center"
                        w="100%"
                    >
                        <Button
                            w="111px"
                            h="46px"
                            color="white"
                            bg="#051E61"
                            fontFamily="MaisonBold"
                            fontSize="14px"
                            fontStyle="normal"
                            fontWeight="700"
                            lineHeight="14px"
                            letterSpacing="0.20000001192092896px"
                        >
                            Add Slide
                        </Button>
                    </HStack>
                </GridItem>
            </Grid>
        </>
    );
};
export default SlidesTab;