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, Stack } from '@mui/material';
import { Description } from '@material-ui/icons';
import imkk from "/public/images/logo-dark-icon.png";
import Taskchecklist from './Taskchecklist';
import Taskcommentclient from './Taskcommentclient';
import UploadTaskDocuments from './UploadTaskDocuments';

function getPriorityColor(priority) {
  switch (priority) {
    case "critical":
      return "#122620";
    case "high":
      return "#122620";
    case "medium":
      return "#122620";
    case "low":
      return "#122620";
    default:
      return "#122620";
  }
}
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 Taskresultclient = (props) => {
  const { selectedclientTask } = props;
  const titleLength = selectedclientTask?.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">
      {selectedclientTask && (
        <>


          <div id="task_resilt_new" className="mb-1 mt-1">
            <Grid container spacing={2}>
              <Grid item xs={12} md={titleGridMd} style={{ paddingBottom: '0', display: "flex", gap: "10px", ...titleStyle }}>

                <Typography gutterBottom className='taskresulttyphead mb-2'>
                  Title:
                </Typography>

                <Typography gutterBottom style={{ color: "#122620", }} className='tasktypobo asdflsmsm mb-2'>
                  {selectedclientTask.title}
                </Typography>
              </Grid>
              <Grid item xs={12} md={4} style={{ paddingBottom: '0', display: "flex", gap: "10px" }}>

                <Typography gutterBottom className='taskresulttyphead mb-2' style={{ width: "80px" }}>Priority:</Typography>



                <Typography
                  gutterBottom
                  className='tasktypobo asdflsmsm mb-2 ms-2'
                  style={{
                    backgroundColor: `${getPriorityColor(selectedclientTask.priority)}`,
                    color: '#fff',
                    padding: '0.01rem',
                    borderRadius: '10px',
                    width: '100px',
                    textAlign: 'center'
                  }}
                >
                  {selectedclientTask.priority}
                </Typography>


              </Grid>
            </Grid>

            {/* New Grid for Start Time */}
            <Grid container spacing={2}>
              <Grid item xs={12} md={4} style={{ paddingBottom: '2px', display: "flex", gap: "10px" }}>
                <Typography gutterBottom className='taskresulttyphead mb-2'>Start Time:</Typography>
                <Typography gutterBottom style={{ color: "#122620" }} className='tasktypobo asdflsmsm mb-2 ms-2'>{selectedclientTask.start_time}</Typography>
              </Grid>
              <Grid item xs={12} md={4} style={{ paddingBottom: '0', display: "flex", gap: "10px" }}>


                <Typography gutterBottom className='taskresulttyphead mb-2' style={{ width: "80px" }}>End Time:</Typography>

                <Typography gutterBottom style={{ color: "#122620" }} className='tasktypobo asdflsmsm mb-2 ms-2'>{selectedclientTask.end_time}</Typography>

              </Grid>


              <Grid item xs={12} md={4} style={{ paddingBottom: '0', display: "flex", gap: "10px" }}>

                <Typography gutterBottom className='taskresulttyphead mb-2' style={{ width: "80px" }}>Status:</Typography>


                <Typography
                  gutterBottom
                  className='tasktypobo asdflsmsm mb-2 ms-2'
                  style={{
                    backgroundColor: `${getStageColor(selectedclientTask.stage)}`,
                    color: '#fff',
                    padding: '0.01rem',
                    borderRadius: '10px',
                    width: '100px',
                    textAlign: 'center'
                  }}
                >
                  {selectedclientTask.stages}
                </Typography>
                {/* <Typography gutterBottom style={{ color: "#dc3545" }} className='tasktypobo asdflsmsm mb-2 ms-2'>{selectedTask.end_time}</Typography> */}


              </Grid>
            </Grid>



            <Grid container xs={12} className="d-flex">

              <Typography gutterBottom className='taskresulttyphead mb-2' style={{ width: "80px" }}>Description:</Typography>

              <Typography gutterBottom style={{ color: "#004822" }} className='tasktypobo  mb-2 ms-2'>{selectedclientTask.description}</Typography>

            </Grid>
          </div>




          <Taskchecklist selectedclientTask={selectedclientTask} />
          <UploadTaskDocuments selectedTask={selectedclientTask} />


          <Taskcommentclient selectedclientTask={selectedclientTask} />
        </>
      )}

    </Box>

  )
}

export default Taskresultclient