text: import React, { useEffect, useState } from "react";
  import {
    CButton,
    CCard,
    CCardBody,
    CCardGroup,
    CCol,
    CContainer,
    CForm,
    CInput,
    CInputGroup,
    CInputGroupPrepend,
    CInputGroupText,
    CRow,
    CTextarea,
  } from "@coreui/react";
  import CIcon from "@coreui/icons-react";
  
  import DatePicker from "../base/datepicker/DatePicker";
  
  import CustomerService from "../../services/customer.service";
  import RecordService from "../../services/record.service";
  
  import { useSelector } from "react-redux";
  import { useParams } from "react-router-dom";
  import Select from "react-select";
  
  const Record = () => {
    const recordSelector = useSelector((state) => state.recordReducer.record);
    const area = useSelector((state) => state.authReducer.area);
    const doctorSelector = useSelector((state) => state.authReducer.user);
    const [record, setRecord] = useState(recordSelector);
    const [doctor, setDoctor] = useState(doctorSelector);
    const [reDate, setRedate] = useState(new Date());
    const [areaId, setAreaId] = useState("");
    const [description, setDescription] = useState("");
    const { id } = useParams();
  
    async function fetchData() {
      setRecord(recordSelector);
      const { data, success, message } =
        await CustomerService.getCustomerBookingRecord(id);
      if (success === true) {
        setRecord(data);
      }
    }
    const onAreaChange = ({ value }) => {
      setAreaId(value);
    };
    const onSubmit = async () => {
      const recorData = {
        profile: recordSelector.customer,
        areaId: areaId,
        description: description,
        booking: { _id: recordSelector._id, date: recordSelector.date },
        reDate: reDate,
      };
      const { data, success, message } = await RecordService.createRecord(
        recorData
      );
  
      alert(message);
    };
    useEffect(() => {
      fetchData();
    }, []);
    return (
      <div className="c-app c-default-layout">
        <CContainer>
          {/* thong tin ca nhan */}
          <CRow>
            <CCol>
              <CRow className="">
                <CCol>
                  <CCardGroup>
                    <CCard className="p-4">
                      <CCardBody>
                        <CForm>
                          <h2>Thông tin bệnh nhân</h2>
                          <CInputGroup className="mb-3 mt-3">
                            <CInputGroupPrepend>
                              <CInputGroupText>
                                <CIcon name="cil-user" />
                              </CInputGroupText>
                            </CInputGroupPrepend>
                            <CInput
                              type="text"
                              placeholder="Họ và tên"
                              autoComplete="off"
                              name="name"
                              value={record.name}
                              contentEditable={false}
                            />
                          </CInputGroup>
                          <CInputGroup className="mb-3">
                            <CInputGroupPrepend>
                              <CInputGroupText>
                                <CIcon name="cil-phone" />
                              </CInputGroupText>
                            </CInputGroupPrepend>
                            <CInput
                              type="text"
                              placeholder="Số điện thoại"
                              autoComplete="off"
                              name="phone"
                              value={record.phone}
                              contentEditable={false}
                            />
                          </CInputGroup>
                          <CInputGroup className="mb-3">
                            <CInputGroupPrepend>
                              <CInputGroupText>
                                <CIcon
                                  name={
                                    record.gender === "male"
                                      ? "cil-user"
                                      : "cil-user-female"
                                  }
                                />
                              </CInputGroupText>
                            </CInputGroupPrepend>
                            <CInput
                              type="text"
                              placeholder="Giới tính"
                              autoComplete="off"
                              name="gender"
                              value={record.gender === "male" ? "Nam" : "Nữ"}
                              contentEditable={false}
                            />
                          </CInputGroup>
                          <CInputGroup className="mb-3">
                            <CInputGroupPrepend>
                              <CInputGroupText>
                                <CIcon name="cil-location-pin" />
                              </CInputGroupText>
                            </CInputGroupPrepend>
                            <CInput
                              type="text"
                              placeholder="Địa chỉ"
                              autoComplete="off"
                              name="address"
                              value={record.address}
                              contentEditable={false}
                            />
                          </CInputGroup>
                        </CForm>
                      </CCardBody>
                    </CCard>
                  </CCardGroup>
                </CCol>
              </CRow>
              {/* thong tin bác sĩ */}
              <CRow className="">
                <CCol>
                  <CCardGroup>
                    <CCard className="p-4">
                      <CCardBody>
                        <CForm>
                          <h2>Thông tin bác sĩ</h2>
                          <CInputGroup className="mb-3 mt-3">
                            <CInputGroupPrepend>
                              <CInputGroupText>
                                <CIcon name="cil-user" />
                              </CInputGroupText>
                            </CInputGroupPrepend>
                            <CInput
                              type="text"
                              placeholder="Họ và tên"
                              autoComplete="off"
                              name="name"
                              value={doctor.name}
                              contentEditable={false}
                            />
                          </CInputGroup>
                          <CInputGroup className="mb-3">
                            <CInputGroupPrepend>
                              <CInputGroupText>
                                <CIcon name="cil-phone" />
                              </CInputGroupText>
                            </CInputGroupPrepend>
                            <CInput
                              type="text"
                              placeholder="Số điện thoại"
                              autoComplete="off"
                              name="phone"
                              value={doctor.username}
                              contentEditable={false}
                            />
                          </CInputGroup>
                          <Select
                            options={area}
                            placeholder="Chọn khoa khám"
                            onChange={onAreaChange}
                          />
                        </CForm>
                      </CCardBody>
                    </CCard>
                  </CCardGroup>
                </CCol>
              </CRow>
            </CCol>
            {/* phieu kham benh */}
            <CCol>
              <CCardGroup>
                <CCard className="p-4">
                  <CCardBody>
                    <CForm>
                      <h2>Phiếu khám bệnh</h2>
                      <CTextarea
                        type="text"
                        placeholder="Mô tả bệnh án"
                        autoComplete="off"
                        name="description"
                        rows="7"
                        onChange={(e) => setDescription(e.target.value)}
                        style={{ resize: "none" }}
                      />
                      <CRow
                        style={{
                          display: "flex",
                          alignItems: "center",
                          marginTop: 18,
                          marginLeft: 0,
                          marginRight: 0,
                          gap: 8,
                        }}
                      >
                        <span>Lịch tái khám: </span>
                        <DatePicker onPickerChange={setRedate} value={reDate} />
                      </CRow>
                    </CForm>
                    <CRow className="mr-0 mt-3 float-right">
                      <CButton color="btn btn-xing" onClick={onSubmit}>
                        Xác nhận hoàn thành
                      </CButton>
                    </CRow>
                  </CCardBody>
                </CCard>
              </CCardGroup>
            </CCol>
          </CRow>
        </CContainer>
      </div>
    );
  };
  
  export default Record;
  