import {Button, Card, Container, Group, Modal,Stack, Text} from "@mantine/core";
import React, {useEffect, useState} from "react";
import {useTranslation} from "react-i18next";
import axios from "axios";
import {Feedback} from "./types/feedback";

interface ModalTasksProps {
  config: Feedback.Config
  show: boolean
  onClose: (task: Api.Task | undefined) => void
}


export default function ModalTasks({
                                     config,
                                     show,
                                     onClose
                                   }: ModalTasksProps) {

  const {t} = useTranslation('feedbackSupport', {useSuspense: false})

  const [feedbackTasks, setFeedbackTasks] = useState<Api.Tasks[]>()

  const [task, setTask] = useState<Api.Task>()

  const handleClose = () => {
    onClose(task)
  }

  useEffect(() => {
      if (feedbackTasks === undefined) {
        axios.get<{ data: Api.Tasks[] }>(`${config.url}/tasks`, {
          params: {
            project: config.project
          },
          headers: config.headers || {}
        }).then((res) => {
          setFeedbackTasks(res.data.data)
        })
      }
    }, []
  )

  return (
    <Modal
      opened={show}
      onClose={handleClose}
      className={'screenshot-hide'}
      fullScreen={true}
      zIndex={10000}
    >
      <Container>
        <Stack spacing={'xs'}>
          {feedbackTasks?.map((tasklist) => {
            if (tasklist.tasks.length > 0) {
              return (
                <Card key={`tasklist_${tasklist.id}`} withBorder>
                  <h3>{tasklist.name}</h3>
                  <Stack spacing={'xs'}>
                    {tasklist.tasks.map((task, i) => {
                      const style = i % 2 === 1 ? {} : {backgroundColor: '#fafafa'}
                      return (
                        <Group key={`task_${task.id}`} position="apart" sx={style}>
                          <Text>{task.name}</Text>
                            <Button onClick={() => onClose(task)}>{t('ModalTasks.selectTask')}</Button>
                        </Group>
                      )
                    })}
                  </Stack>
                </Card>
              )
            }
          })}
        </Stack>
      </Container>
    </Modal>
  )
}