Untitled

import React from 'react'
import VisibilityIcon from '@mui/icons-material/Visibility';
import { Avatar, Grid, List, ListItem, Typography } from "@material-ui/core";
import Divider from '@mui/material/Divider';
import Chip from '@mui/material/Chip';
import "./fulltask.css";
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Box, IconButton, Stack, TextField, Button } from '@mui/material';
import imkk from "/public/images/logo-dark-icon.png";
import Taskchecklist from './Taskchecklist';
import Taskcomment from './taskcomment';
import UploadTaskDocuments from './UploadTaskDocuments';
import {
  PriorityHigh,
  AccessTime,
  Description,
  AddCircleOutline,
} from "@mui/icons-material";

function getPriorityColor(priority) {
  switch (priority) {
    case "critical":
      return "#e74c3c";
    case "high":
      return "#3498db";
    case "medium":
      return "#07bc0c";
    case "low":
      return "#5856d6";
    default:
      return "#007fff";
  }
}
function getStageColor(stage) {
  switch (stage) {
    case "new":
      return "#122620";
    case "todo":
      return "#122620";
    case "progress":
      return "#122620";
    case "review":
      return "#122620";
    case "completed":
      return "#122620";
    default:
      return "#122620";
  }
}
const Taskresult = (props) => {
  const { selectedTask } = props;
  const capitalizedPriority = selectedTask?.priority.charAt(0).toUpperCase() + selectedTask?.priority.slice(1);
  const titleLength = selectedTask?.title.length || 0;

  let titleGridMd = titleLength > 90 ? 12 : titleLength > 30 ? 8 : 4;
  const titleStyle = titleLength > 90 ? { overflow: 'hidden', textOverflow: 'ellipsis', flexWrap: 'wrap' } : {};


  return (

    <Box className="taskresultresukbox taskresultresukbox22boxdhdhh">
      {selectedTask && (
        <>
          <Box
            sx={{
              width: "100%",
              margin: "20px auto",
              padding: "20px",
              backgroundColor: "#fff",
            }}
          >
            {/* Title and Priority */}
            <Box display="flex" justifyContent="space-between" alignItems="center">
              <Typography variant="h6" fontWeight="600">
                {selectedTask.title}
              </Typography>
              <Box display="flex">
                <Typography gutterBottom className='taskresulttyphead mb-2' style={{ width: "80px" }}>Priority:</Typography>
                <Typography
                  gutterBottom
                  className='tasktypobo asdflsmsm mb-2 ms-2'
                  style={{
                    backgroundColor: `${getPriorityColor(selectedTask.priority)}`,
                    color: '#fff',
                    padding: '0.01rem',
                    borderRadius: '10px',
                    width: '100px',
                    textAlign: 'center'
                  }}
                >
                  {capitalizedPriority}
                </Typography>
              </Box>
            </Box>

            {/* Start Time and End Time */}
            <Box mt={2} display="flex" justifyContent="space-between">
              <Box display="flex" alignItems="center">
                <Typography ml={1} variant="body2" color="textSecondary">
                  <span style={{ fontSize: "14px", fontWeight: "600", color: "#122620" }}>  Start Time :</span>  {selectedTask.start_time}
                </Typography>
              </Box>
              <Box display="flex" alignItems="center">
                <Typography ml={1} variant="body2" color="textSecondary">
                  <span style={{ fontSize: "14px", fontWeight: "600", color: "#122620" }}>End Time :</span>  {selectedTask.end_time}
                </Typography>
              </Box>
            </Box>

            {/* Status */}
            <Box mt={2} display="flex" justifyContent="space-between">

              <Box display="flex" alignItems="center">
                <Typography
                  variant="body1"
                  color="success.main"
                  sx={{
                    display: "inline-block",
                    padding: "5px 10px",
                    border: "1px solid #28a745",
                    borderRadius: "20px",
                  }}
                >
                  Status: {selectedTask.stages}
                </Typography>
              </Box>
              <Box display="flex" alignItems="center">
                <Typography ml={1} variant="body2" color="textSecondary">
                  <span style={{ fontSize: "16px", fontWeight: "600" }}> Description:</span>   {selectedTask.description}
                </Typography>
              </Box>
            </Box>

            <Divider sx={{ my: 3 }} />

            {/* Task Checklist */}

            <Taskchecklist selectedTask={selectedTask} />

            <Divider sx={{ my: 3 }} />

            <Box>
              <UploadTaskDocuments selectedTask={selectedTask} />
            </Box>
            <Divider sx={{ my: 3 }} />
            <Box>
              <Taskcomment selectedTask={selectedTask} />
            </Box>
          </Box>
        </>
      )}

    </Box>

  )
}

export default Taskresult