import React from "react";
import { Button } from "react-bootstrap";
import { IconBack } from "../../../general/assets/images/common-icons";
import { SectionHeading } from "../../../general/components/elements";
import { Switch, TextField } from "../../../general/components/inputs";

const EditPhoneCall = ({
  goBack = () => {},
  data,
  handleUpdateCallLog = () => {},
  updateCurrentData = () => {},
  extension_number = "",
}) => {
  const onHandleOnSave = () => {
    handleUpdateCallLog({
      id: data.phone_call_item_id,
      voip_call_id: data.voip_call_id,
      extension_number: extension_number,
      notes: data?.notes || "",
      follow_up_required: data?.follow_up_required || false,
      __update_field_mask: {
        notes: true,
        follow_up_required: true,
      },
    });
    goBack();
  };

  const handleChangeNotes = (e) => {
    updateCurrentData({ ...data, notes: e.target.value });
  };

  const handleChangeFollowUp = (e) => {
    updateCurrentData({ ...data, follow_up_required: e.target.checked });
  };
  return (
    <div className="mt-20 full-width">
      <div className="align-h-start mb-10" onClick={goBack}>
        <img src={IconBack} alt="" />
        <span className="pointer">BACK</span>
      </div>
      <div
        className="align-v-between"
        style={{ width: "100%", height: "70vh" }}
      >
        <div className="overflown-body">
          <TextField label="Phone number" data={data.phone_number} disabled />
          <TextField label="Call date and time" data={data.date} disabled />
          <TextField label="Name" data={data.name} disabled />
          <TextField label="Type" data={data.entity_type} disabled />
          <Switch
            label="Follow up needed"
            data={data?.follow_up_required}
            onChange={handleChangeFollowUp}
          />
          <TextField
            label="Notes"
            data={data?.notes || ""}
            onChange={handleChangeNotes}
          />
        </div>
        <div className="align-h-between full-width">
          <Button className="full-width" onClick={goBack}>
            Cancel
          </Button>
          <Button
            className="button--bluish full-width"
            onClick={onHandleOnSave}
          >
            Save
          </Button>
        </div>
      </div>
    </div>
  );
};

export default EditPhoneCall;