import React from "react";
import Button from "../pageElements/Button.js";
import { FileEarmarkText } from "react-bootstrap-icons";
import TextInput from "../pageElements/TextInput";
import Tooltip from "../pageElements/Tooltip";
import { InfoCircle } from "react-bootstrap-icons";

export const InfoCard = (props) => {
  const { data, onEdit, onCancel, onSave, onChangeInput, isEditing, isBusy } =
    props;

  const {
    caseNumber,
    caption,
    jurisdiction,
    judge,
    venue,
    caseType,
    trialDate,
    filedDate,
    contactFirstName,
    contactLastName,
    contactEmail,
    attorneys,
    parties,
  } = data;

  const editingContent = () => {
    return (
      <>
        <div className="info-column">
          <div className="info-row">Case caption:</div>
          <TextInput
            id="caption"
            disa
            inputClassName="info-edit-input"
            value={caption}
            disabled={isBusy}
            onChange={(e) => onChangeInput(e, "caption")}
          />
          <div className="info-row">Jurisdiction:</div>
          <TextInput
            id="jurisdiction"
            inputClassName="info-edit-input"
            value={jurisdiction}
            disabled={isBusy}
            onChange={(e) => onChangeInput(e, "jurisdiction")}
          />
          <div className="info-row">Judge:</div>
          <TextInput
            id="judge"
            inputClassName="info-edit-input"
            value={judge}
            disabled={isBusy}
            onChange={(e) => onChangeInput(e, "judge")}
          />
          <div className="info-row">Venue:</div>
          <TextInput
            id="venue"
            inputClassName="info-edit-input"
            value={venue}
            disabled={isBusy}
            onChange={(e) => onChangeInput(e, "venue")}
          />
          {caseType || isEditing ? (
            <>
              <div className="info-row">Case type:</div>
              <div>
                <TextInput
                  id="caseType"
                  inputClassName="info-edit-input"
                  value={caseType}
                  disabled={isBusy}
                  onChange={(e) => onChangeInput(e, "caseType")}
                />
              </div>
            </>
          ) : (
            <></>
          )}
          <div className="info-row">Trial date:</div>
          <TextInput
            id="trialDate"
            inputClassName="info-edit-input"
            value={trialDate}
            disabled={isBusy}
            onChange={(e) => onChangeInput(e, "trialDate")}
          />
        </div>
        <div className="info-column">
          <div className="info-row">Index number:</div>
          <TextInput
            id="caseNumber"
            inputClassName="info-edit-input"
            value={caseNumber}
            disabled={isBusy}
            onChange={(e) => onChangeInput(e, "caseNumber")}
          />
          <div className="info-row">Date filed:</div>
          <TextInput
            id="dateFiled"
            inputClassName="info-edit-input"
            value={filedDate}
            disabled={isBusy}
            onChange={(e) => onChangeInput(e, "filedDate")}
          />
          <div className="info-row">
            Contact:
            <TextInput
              id="contactFirst"
              inputClassName="info-edit-input"
              value={contactFirstName}
              disabled={isBusy}
              onChange={(e) => onChangeInput(e, "contactFirstName")}
            />
            <TextInput
              id="contactLast"
              inputClassName="info-edit-input"
              value={contactLastName}
              disabled={isBusy}
              onChange={(e) => onChangeInput(e, "contactLastName")}
            />
          </div>
          <div className="info-row">Contact email:</div>
          <TextInput
            id="contactEmail"
            inputClassName="info-edit-input"
            value={contactEmail}
            disabled={isBusy}
            onChange={(e) => onChangeInput(e, "contactEmail")}
          />
          <div className="info-row">Lead attorneys:</div>
          <TextInput
            id="leadAttorneys"
            inputClassName="info-edit-input"
            value={attorneys}
            disabled={isBusy}
            onChange={(e) => onChangeInput(e, "attorneys")}
          />
        </div>
      </>
    );
  };

  const infoContent = () => {
    return (
      <>
        <div className="info-column">
          <div className="info-row">
            Case caption: <p className="info-text"> {caption}</p>
          </div>
          <div className="info-row">
            Jurisdiction: <p className="info-text"> {jurisdiction}</p>
          </div>
          <div className="info-row">
            Judge: <p className="info-text"> {judge}</p>
          </div>
          <div className="info-row">
            Venue: <p className="info-text"> {venue}</p>
          </div>
          {caseType ? (
            <div className="info-row">
              Case type: <p className="info-text"> {caseType}</p>
            </div>
          ) : (
            <></>
          )}
          <div className="info-row">
            Trial date: <p className="info-text"> {trialDate}</p>
          </div>
        </div>
        <div className="info-column">
          <div className="info-row">
            Index number: <p className="info-text"> {caseNumber}</p>
          </div>
          <div className="info-row">
            Date filed: <p className="info-text"> {filedDate}</p>
          </div>
          <div className="info-row">
            Contact:
            <p className="info-text">
              {contactFirstName} {contactLastName}
            </p>
          </div>
          <div className="info-row">
            Contact email: <p>{contactEmail}</p>
          </div>
          <div className="info-row">
            Lead attorneys: <p className="info-text"> {attorneys}</p>
          </div>
        </div>
      </>
    );
  };

  return (
    <div className="info-card-outer">
      <div className="info-upper-wrapper">
        {isEditing ? editingContent() : infoContent()}
      </div>
      <div className="info-button-wrapper">
        {isEditing ? (
          <>
            <Button
              onClick={() => onSave()}
              labelText="Save"
              className="btn primary-button save-button"
              disabled={isBusy}
            />
            <Button
              onClick={() => onCancel()}
              labelText="Cancel"
              className="btn primary-button cancel-button"
              disabled={isBusy}
            />
          </>
        ) : (
          <Button
            onClick={() => onEdit()}
            labelText="Edit"
            className="btn primary-button edit-button"
            disabled={isBusy}
          />
        )}
      </div>
    </div>
  );
};

export const CaseCard = (props) => {
  const {
    caption,
    captionTwo,
    caseNumber,
    filedDate,
    jurisdiction,
    caseId,
    onClick,
    labelText,
  } = props;

  return (
    <div className="linkcard-container">
      <div className="card-col1">
        {caption} v. {captionTwo}
      </div>
      <div className="card-col2">{jurisdiction}</div>
      <div className="card-col3">
        <p className="card-text">{`Filed: ${filedDate}`}</p>
      </div>
      <div className="card-col4">{caseNumber}</div>
      <div className="card-viewButton-container">
        <Button
          onClick={() => onClick(caseId)}
          labelText={labelText}
          className="btn btn-primary view-button"
        />
      </div>
    </div>
  );
};

export const DocCard = (props) => {
  const {
    title,
    parentCaseNumber,
    parentCaseName,
    parentCaseId,
    documentId,
    dateServed,
    docType,
    displayDeleteButton,
    handleNavigate,
    responseGenerations,
    confirmDelete,
  } = props;
  const tooltipText =
    "Parsing is taking longer than usual. Reasons may include high traffic, or a transitory system error. Usually this will resolve in 10 minutes. If not, click “report”, and it will be fixed in 24 hours.";
  const disabled = docType ? false : true;
  return (
    <div className="doc-card-container">
      <div className="doc-card-input">
        <div className="card-col-icon">
          <FileEarmarkText className="doc-file-icon" size="22px" />
        </div>
        <div className="doc-col2">
          {title} {disabled ? <Tooltip text={tooltipText} /> : <></>}
        </div>
        {dateServed ? (
          <div className="doc-col3">Served: {dateServed}</div>
        ) : (
          <></>
        )}
        <div className="doc-col4">
          <div className="jurisdiction-box">{parentCaseName}</div>
        </div>
        <div className="doc-col5">{parentCaseNumber}</div>
        <div className="doc-col6">
          {displayDeleteButton ? (
            disabled ? (
              <Button
                labelText="Report"
                className="btn btn-primary report-button"
              />
            ) : (
              <Button
                onClick={() =>
                  confirmDelete(documentId, docType, responseGenerations)
                }
                labelText="Delete"
                className="btn btn-primary view-button delete-one"
              />
            )
          ) : (
            <></>
          )}
        </div>
      </div>
      <div className="doccard-button-wrapper">
        <Button
          disabled={disabled}
          className={"primary-button pt-2 pb-2 gen-button"}
          onClick={() =>
            documentId &&
            handleNavigate(
              documentId,
              responseGenerations,
              parentCaseId,
              docType
            )
          }
          labelText={
            responseGenerations > 0 ? "Edit Response" : "Generate Response"
          }
        />
      </div>
    </div>
  );
};