import { Fragment, useEffect, useState } from "react"
import style from "./admin-feedback.module.css"
import { Icon } from "../../../ui-component/icon/icon.component"
import { Config } from "../../../utils/config"
import { FeedbackType } from "../../../types/feedback.type"

export function AdminFeedback() {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------

  const [show, setShow] = useState(false)
  const [isLoading, setLoading] = useState(false)
  const [buildTeams, setBuildTeams] = useState<FeedbackType[]>([])
  const [showFullDescription, setShowFullDescription] = useState<boolean[]>(
    new Array(buildTeams.length).fill(false),
  )

  // ---------------------------------------------------------------------------
  // effect
  // ---------------------------------------------------------------------------

  useEffect(() => {
    loader()
  }, [])

  // ---------------------------------------------------------------------------
  // functions
  // ---------------------------------------------------------------------------

  async function loader() {
    try {
      setLoading(true)
      const response = await fetch(`${Config.url}/api/feedback/get`, {
        method: "GET",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
      })

      if (!response.ok) {
        alert("Something went wrong!")
        return
      }
      const result: FeedbackType[] = await response.json()
      setBuildTeams(result)
      setLoading(false)
    } catch (error) {
      alert("Network error. Please try again.")
    }
  }

  function toggleDescription(index: number) {
    setShowFullDescription((prevShowFullDescription) => {
      const newShowFullDescription = [...prevShowFullDescription]
      newShowFullDescription[index] = !newShowFullDescription[index]
      return newShowFullDescription
    })
  }

  // ---------------------------------------------------------------------------
  if (isLoading) {
    return <div className={style.loading}>Loading...</div>
  }
  return (
    <>
      {buildTeams.length > 0 && (
        <div className={style.tableContainer}>
          <div className={style.subContainer}>
            <table className={style.table}>
              {/* --------------------------------------------------------------------------- */}
              {/* TABLE */}
              {/* --------------------------------------------------------------------------- */}

              <thead className={style.subTable}>
                <tr>
                  <th className={style.tableHead}>Date</th>
                  <th className={style.tableHead}>Creator</th>
                  <th className={style.tableHead}>Message</th>
                </tr>
              </thead>
              <tbody className={style.subTable}>
                {buildTeams.map((buildTeam, index) => (
                  <>
                    <tr key={index} className={style.tableFooterItems}>
                      <td className={style.tableBodyDate}>
                        {buildTeam.created_at}
                      </td>
                      <td
                        className={style.tableContact}
                        style={{ width: "15%" }}
                      >
                        <p className={style.tableContactMobile}>
                          {buildTeam.name}
                        </p>
                        <p className={style.tableContactMobile}>
                          {buildTeam.phone}
                        </p>
                        <p className={style.tableContactMobile}>
                          {buildTeam.email}
                        </p>
                      </td>
                      <td className={style.tableBodyEngineers}>
                        <span className={style.tableTitle}>Message</span>
                        <div className={style.skill}>
                          {showFullDescription[index]
                            ? buildTeam.message
                            : buildTeam.message
                                .split(" ")
                                .slice(0, 20)
                                .join(" ") + "..."}
                        </div>
                      </td>
                    </tr>
                  </>
                ))}
              </tbody>

              {/* --------------------------------------------------------------------------- */}
              {/* TABLE FOR MOBILE */}
              {/* --------------------------------------------------------------------------- */}
              {buildTeams.map((buildTeam, index) => (
                <>
                  <tbody className={style.tableMob}>
                    <Fragment key={index}>
                      <tr>
                        <td>
                          <span className={style.tableBodyDateMobile}>
                            {buildTeam.created_at}
                          </span>
                        </td>
                        <td style={{ borderLeft: "1px solid #ddd" }}>
                          <p className={style.tableContactMobile}>
                            {buildTeam.name}
                          </p>
                          <p className={style.tableContactMobile}>
                            {buildTeam.phone}
                          </p>
                          <p className={style.tableContactMobile}>
                            {buildTeam.email}
                          </p>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <p className={style.teamTitle}>Message</p>
                          {showFullDescription[index]
                            ? buildTeam.message
                            : buildTeam.message
                                .split(" ")
                                .slice(0, 20)
                                .join(" ") + "..."}
                        </td>
                      </tr>
                    </Fragment>
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colSpan={6}>
                        <div
                          className={style.bottomElement}
                          onClick={() => {
                            toggleDescription(index)
                            setShow(!show)
                          }}
                        >
                          {show ? (
                            <>
                              <span className={style.moreText}>Wrap</span>

                              <Icon
                                name="fa-light fa-chevron-up"
                                size="1.6"
                                style={{ color: "#5807C9" }}
                              />
                            </>
                          ) : (
                            <>
                              <span className={style.moreText}>More</span>
                              <Icon
                                name="fa-light fa-chevron-down"
                                size="1.6"
                                style={{ color: "#5807C9" }}
                              />
                            </>
                          )}
                        </div>
                      </td>
                    </tr>
                  </tfoot>
                </>
              ))}
            </table>
          </div>
        </div>
      )}

      {/* --------------------------------------------------------------------------- */}
      {/* TABLE */}
      {/* --------------------------------------------------------------------------- */}

      {buildTeams.length === 0 && (
        <div className={style.loading}>No feedback yet.</div>
      )}
    </>
  )
}
given flex:1 in className={style.loading} but issue when screen is small flex:1 disabling it says The display: block property on the parent element prevents flex from having an effect.
Try setting the display: block property on the parent to display: flex.