import { useState } from 'react';
import { Box, Card, Flex, Group, Select, Tabs, Text, ThemeIcon } from '@mantine/core';
import { IconSelector, IconListCheck } from '@tabler/icons-react';
import { useSelector } from 'react-redux';
import TaskList from "./TaskList";
import { translate } from "../../utils/i18n";
import MyTaskCalendarView from './MyTaskCalendarView';

const TaskListTabs = ({ dragHandle }) => {
    const { userTaskOrdered, userTaskListSections, userTaskColumns, allTasks } = useSelector((state) => state.settings.myTask);
    const [activeTab, setActiveTab] = useState('all');
    const [view, setView] = useState('list');

    return (
        <Card padding="md" withBorder radius="md" h="100%">
            <Card.Section withBorder inheritPadding py="xs" className="bg-[#F9D7BF] mb-2">
                <Box className={dragHandle ? "draggable-header cursor-grab" : ""}>
                    <Group justify="space-between" align="center" wrap="nowrap">
                        <Group gap="xs" wrap="nowrap">
                            {dragHandle}
                            <ThemeIcon size="sm" radius="sm" variant="light" color="#ED7D31">
                                <IconListCheck size={14} />
                            </ThemeIcon>
                            <Text fw={600} size="sm">{translate('My Tasks')}</Text>
                        </Group>
                        <Box
                            onMouseDown={(e) => { if (dragHandle) e.stopPropagation(); }}
                            style={{ background: '#fff', borderRadius: 6, paddingLeft: 8 }}
                        >
                            <Select
                                size="xs"
                                variant="unstyled"
                                placeholder={translate('Select View')}
                                data={[
                                    { value: 'list', label: translate('List') },
                                    { value: 'calendar', label: translate('Calendar') }
                                ]}
                                value={view}
                                onChange={setView}
                                allowDeselect={false}
                                comboboxProps={{ width: 120, position: 'bottom-start' }}
                                rightSection={<IconSelector size={14} stroke={2} color="#64748B" />}
                                w={120}
                            />
                        </Box>
                    </Group>
                </Box>
            </Card.Section>
            {view === 'list' ? (
                <Card.Section px="xs" pb="xs">
                    <Tabs variant="pills" radius="sm" value={activeTab}
                        className='my-tabs'
                        styles={{
                            tab: { color: '#202020', backgroundColor: '#F5F8F9' },
                        }}
                        onChange={setActiveTab}
                    >
                        <Tabs.List className="mb-3">
                            {userTaskOrdered && userTaskOrdered.length > 0 && userTaskOrdered.map((taskListSection, index) => (
                                <Tabs.Tab value={taskListSection} className="font-bold" key={index}>
                                    {translate(userTaskListSections && userTaskListSections[taskListSection] && userTaskListSections[taskListSection])}
                                </Tabs.Tab>
                            ))}
                        </Tabs.List>

                        {userTaskOrdered && userTaskOrdered.length > 0 ? (
                            <>
                                {userTaskOrdered.map((taskListSection, index) => (
                                    <Tabs.Panel key={index} value={taskListSection}>
                                        <TaskList slug={taskListSection} header={userTaskListSections && userTaskListSections[taskListSection]} />
                                    </Tabs.Panel>
                                ))}
                            </>
                        ) : (
                            <Box mih={355} w={"100%"}>
                                <Flex direction="column" align="center" justify="center">
                                    <Text c="dimmed" ta="center" py="xl">{translate('No Task Found')}</Text>
                                </Flex>
                            </Box>
                        )}

                    </Tabs>
                </Card.Section>
            ) : (
                <MyTaskCalendarView tasks={allTasks} />
            )}

        </Card>
    );
};

export default TaskListTabs;