import {Avatar, Button, Flex, Grid, Switch, Text, TextInput, useMantineTheme} from "@mantine/core";
import {useState} from '@wordpress/element';
import * as TablerIcons from "@tabler/icons-react";


const Component = ({activeLayout, setActiveLayout, component, index}) => {
    const [editMode, setEditMode] = useState(false);
    const ICON = TablerIcons[component.customize_properties?.icon_code] === undefined ? TablerIcons['IconDots'] : TablerIcons[component.customize_properties?.icon_code];
    const theme = useMantineTheme();

    return (
        <Grid align="center" justify="space-between" gutter={0}>
            <Grid.Col span={2} p={5}>
                <Avatar variant="filled" color={`${component?.customize_properties?.is_active ? 'dark.9' : ''}`}>

                    <ICON />

                </Avatar>
                {editMode && <Text>{component?.customize_properties?.label}</Text>}

            </Grid.Col>
            <Grid.Col span="auto" p={5}>
                {component?.customize_properties?.is_active && editMode && (
                    <TextInput
                        defaultValue={component?.customize_properties.label}
                        onChange={(event) => {
                            let temp = [...activeLayout.components];
                            temp[index].customize_properties.label = event.target.value;
                            setActiveLayout({
                                ...activeLayout,
                                components: temp
                            })
                        }}
                    />
                )}

            </Grid.Col>
            <Grid.Col span={4} p={5}>
                <Flex
                    align="center"
                    justify="flex-end"
                    gap="sm"
                >
                    <Button
                        disabled={!component?.customize_properties?.is_active}
                        size="compact-xs"
                        radius="xs"
                        color={theme.primaryColor + '.1'}
                        fw={500}
                        onClick={() => setEditMode(!editMode)}

                    >
                        <Text c="dark.7" fz={12}>Edit</Text>
                    </Button>
                    <Switch
                        defaultChecked={component?.customize_properties?.is_active}
                        size="xs"
                        label=""
                        radius="sm"
                        onChange={(event) => {
                            let temp = [...activeLayout.components];
                            temp[index].customize_properties.is_active = event.target.checked;
                            setActiveLayout({
                                ...activeLayout,
                                components: temp
                            })
                        }}
                    />
                </Flex>

            </Grid.Col>
        </Grid>
    )
}

export default Component;