text: import React, { useCallback, useEffect, useState } from 'react';
  import { Table } from 'react-bootstrap';
  import { toast } from 'react-toastify';
  import ReactTooltip from 'react-tooltip';
  
  import { useWindowSize } from '../../hooks/useWindowWidth';
  import { useUser } from '../../redux/slices/loginSlice';
  import { getScrums, saveScrum } from '../../services/Groups/scrum';
  import { nextDates, prevDates, TodayDate } from '../../utils/dateUtils';
  import icons from '../../utils/getIcons';
  import TableRow from './TableRow';
  
  const DEFAULT_SCRUM = {
    attendance: null,
    saw_last_lecture: null,
    tha_progress: '',
    topics_to_cover: '',
    backlog_reasons: '',
    class_rating: 0,
    last_tha_link: '',
  };
  
  export default function Scrums({ group, groupMembers, groupId }) {
    const groupCreationDate = group.created_at.split('T')[0];
    const LIMIT = 1200;
    const today_date = TodayDate();
    const user = useUser();
    const isTeamOwner = group.owner_id === user.id;
    const isTeamCoOwner = group.co_owner_id === user.id;
    const canSeeHistory =
      group.batch_leader_id === user.id || user.user_type === 'admin';
    const [isLoading, setIsLoading] = useState(false);
    const [questions, setQuestions] = useState([]);
    const [width] = useWindowSize();
  
    const [scrumDate, setScrumDate] = useState(today_date);
  
    const Fetch_specific_scrum = useCallback(
      async (scrum_date) => {
        try {
          setIsLoading(true);
          const response = await getScrums(groupId, scrum_date);
  
          const scrumsData = [];
          for (const group_member of groupMembers) {
            const {
              user_id,
              user_details: { username, name, avatar },
            } = group_member;
            const respData = response.find(
              (member) => member.user_id === user_id
            );
            if (respData) {
              scrumsData.push({ ...respData, user_id, username, name, avatar });
            } else {
              scrumsData.push({
                username,
                name,
                avatar,
                user_id,
                group_id: groupId,
                ...DEFAULT_SCRUM,
              });
            }
          }
  
          setQuestions(scrumsData);
        } catch (e) {
          toast.error('An Error Occurred Fetching Scrums');
        }
        setIsLoading(false);
      },
      [groupId, groupMembers]
    );
  
    useEffect(() => {
      Fetch_specific_scrum(today_date);
    }, [Fetch_specific_scrum, today_date]);
  
    const updateQuestions = (index, newData) => {
      setQuestions((arr) =>
        arr.map((obj, i) => (i === index ? { ...obj, ...newData } : obj))
      );
    };
  
    const postScrumData = async (member, index) => {
      try {
        const repsonse = await saveScrum(member, isTeamOwner || isTeamCoOwner);
        const scrum_id = repsonse.data.id;
        updateQuestions(index, { scrum_id });
        toast.success(`Scrum Saved for ${member.name}!!`);
      } catch (e) {
        toast.error('Something Went Wrong!!!');
      }
    };
  
    const calculateAttendanceCount = () => {
      return questions.filter((scrum) => scrum.attendance === true).length;
    };
  
    if (isLoading) {
      return (
        <div className="dashboard d-flex">
          <div className="spinner-border text-primary m-auto" role="status" />
        </div>
      );
    }
  
    return (
      <div
        style={{
          backgroundColor: '#fff',
          boxShadow: '0 0 20px #0003',
          minHeight: 'calc(100% - 70px)',
          width: '100%',
          borderRadius: '18px',
          padding: '40px 40px',
        }}
      >
        <div className="d-flex justify-content-between">
          <h3 className="h4 text-primary mb-3 ml-2">Scrums</h3>
          <div className="d-flex">
            <div className="d-flex">
              <div className="mx-1">
                <button
                  style={{
                    background: 'transparent',
                    border: 'none',
                    cursor: 'pointer',
                  }}
                  onClick={(e) => {
                    const resultDate = prevDates(scrumDate, 7, groupCreationDate);
                    Fetch_specific_scrum(resultDate);
                    setScrumDate(resultDate);
                  }}
                >
                  <img
                    src={icons.scrums_prev_week}
                    alt="calender"
                    data-tip="Previous Week"
                  />
                </button>
              </div>
              <div className="mx-1">
                <button
                  style={{
                    background: 'transparent',
                    border: 'none',
                    cursor: 'pointer',
                  }}
                  onClick={(e) => {
                    const resultDate = prevDates(scrumDate, 1, groupCreationDate);
                    Fetch_specific_scrum(resultDate);
                    setScrumDate(resultDate);
                  }}
                >
                  <img
                    src={icons.scrums_prev_day}
                    alt="calender"
                    data-tip="Previous Day"
                  />
                </button>
              </div>
              <div className="mx-3 mb-2">
                <input
                  type="date"
                  name="scrum_date"
                  className="batch-leader-date"
                  max={today_date}
                  min={groupCreationDate}
                  onChange={(e) => {
                    setScrumDate(e.target.value);
                    Fetch_specific_scrum(e.target.value);
                  }}
                  value={scrumDate}
                  style={{
                    color: '#9B9B9B',
                    outline: 'none',
                    border: 'none',
                    width: '160px',
                    cursor: 'pointer',
                  }}
                />
              </div>
              <div className="mx-1">
                <button
                  style={{
                    background: 'transparent',
                    border: 'none',
                    cursor: 'pointer',
                  }}
                  onClick={(e) => {
                    const resultDate = nextDates(scrumDate, 1);
                    Fetch_specific_scrum(resultDate);
                    setScrumDate(resultDate);
                  }}
                >
                  <img
                    src={icons.scrums_next_day}
                    alt="calender"
                    data-tip="Next Day"
                  />
                </button>
              </div>
              <div className="mx-1">
                <button
                  style={{
                    background: 'transparent',
                    border: 'none',
                    cursor: 'pointer',
                  }}
                  onClick={(e) => {
                    const resultDate = nextDates(scrumDate, 7);
                    Fetch_specific_scrum(resultDate);
                    setScrumDate(resultDate);
                  }}
                >
                  <img
                    src={icons.scrums_next_week}
                    alt="calender"
                    data-tip="Next Week"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div className="px-2 py-1 text-muted" style={{ fontSize: '15px' }}>
          Attendance count:{' '}
          <strong>
            {calculateAttendanceCount()} / {questions.length}
          </strong>
        </div>
        <Table bordered className="mt-3 p-0 groups-scrums-main-table">
          <thead>
            <tr style={{ color: '#9B9B9B', fontFamily: 'Montserrat' }}>
              <th>Name</th>
              <th className={width.width < LIMIT && 'd-none'}>
                Saw Last Lecture
              </th>
              <th className={width.width < LIMIT && 'd-none'}>THA progress</th>
              <th className={width.width < LIMIT && 'd-none'}>
                Today&apos;s plan
              </th>
              <th className={width.width < LIMIT && 'd-none'}>Backlogs</th>
              <th className={width.width < LIMIT && 'd-none'}>Class Rating</th>
              <th></th>
            </tr>
          </thead>
          <tbody style={{ color: '#000000', fontFamily: 'Montserrat' }}>
            {questions.map((question, index) => (
              <TableRow
                updateQuestions={updateQuestions}
                question={question}
                index={index}
                isTeamOwner={isTeamOwner}
                isTeamCoOwner={isTeamCoOwner}
                user={user}
                owner_id={group.owner_id}
                co_owner_id={group.co_owner_id}
                isAdminOrBatchLeader={canSeeHistory}
                isPresentDate={
                  new Date(scrumDate).getDate() === new Date(today_date).getDate()
                }
                postScrumData={postScrumData}
                key={index}
                widthCondition={width.width < LIMIT ? 'd-none' : ''}
              />
            ))}
          </tbody>
        </Table>
        <ReactTooltip />
      </div>
    );
  }
  