import React from 'react';
import { ColorProp, FlexWidget, IconWidget, ListWidget, SvgWidget, TextWidget, } from 'react-native-android-widget';
import { getClockProgressSVG } from '../../components/clockProgress';
import { Category } from '../../models/category';
import { Task } from '../../models/task';
import { GetTaskColor } from '../../utils/colors';

export function HelloWidget({ tasks, categories }: { tasks: Task[], categories?: Category[] }) {

    const demoTasks: Task[] = [
        new Task('Task 1', 3, 1, new Date().getTime()),
        new Task('Task 2', 5, 1, new Date().getTime()),
        new Task('Task 2', 5, 1, new Date().getTime()),
        new Task('Task 2', 5, 1, new Date().getTime()),
        new Task('Task 2', 5, 1, new Date().getTime())
    ];

    return (
        <FlexWidget
            style={{
                height: 'match_parent',
                width: 'match_parent',
                backgroundColor: '#121212',
                borderRadius: 16,
                padding: 24
            }}
        >
            <FlexWidget style={{
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-between',
                marginBottom: 16,
                width: 'match_parent',
            }}>
                <TextWidget
                    text="Hello, Tasks!"
                    style={{
                        color: '#ffffff',
                        fontSize: 24,
                        fontWeight: 'bold',
                    }}
                />
                <IconWidget font="material" icon="refresh" size={32} style={{
                    color: '#ffffff',
                }} clickAction='REFRESH' />
            </FlexWidget>
            <ListWidget
                style={{
                    width: 'match_parent',
                    height: 'match_parent',
                }}
            >
                {(tasks ?? demoTasks).map((task, index) => (
                    <FlexWidget
                        key={Date.now() + "-" + Math.random() + "-" + index + "-" + task.id}
                        style={{
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'space-between',
                            width: 'match_parent',
                            paddingVertical: 8
                        }}>
                        <FlexWidget
                            style={{
                                width: 'match_parent',
                                borderLeftWidth: 20,
                                borderLeftColor: GetTaskColor(task) as ColorProp,
                                alignItems: 'center',
                                flexDirection: 'row',
                                justifyContent: 'space-between',
                                paddingVertical: 16,
                                paddingHorizontal: 16,
                                borderRadius: 8,
                                backgroundColor: '#333333',
                            }}
                        >
                            <FlexWidget
                                style={{
                                    flexDirection: 'column'
                                }}>
                                <TextWidget
                                    text={task.title}
                                    style={{
                                        color: '#ffffff',
                                        fontSize: 20,
                                        fontWeight: 'bold',
                                    }}
                                />
                                <TextWidget
                                    text={categories?.find(c => c.id === task.category)?.title || 'Uncategorized'}
                                    style={{
                                        color: '#ffffff',
                                        fontSize: 16,
                                    }}
                                />
                            </FlexWidget>
                            <SvgWidget svg={getClockProgressSVG(
                                ((task.daysToRedo! - (((Date.now() - task.lastDone!) / (24 * 3600 * 1000)))) / task.daysToRedo!) * 360, // Example calculation for degree
                                100,
                                100,
                                GetTaskColor(task) as ColorProp
                            )} clickAction='UPDATE_TASK' clickActionData={{
                                id: task.id
                            }} />
                        </FlexWidget>
                    </FlexWidget>
                ))}
                {(tasks && tasks.length === 0) &&
                    <TextWidget text='No tasks created.' style={{
                        color: '#ffffff'
                    }}>
                    </TextWidget>}
            </ListWidget>
        </FlexWidget>
    );
}