1  import React, {useState} from "react";
  2  import styles from "./passportform.module.scss";
  3  import { PassportDB } from "../Database/Database";
  4  import useAuth from "../../auth/hooks/useAuth";
  5  
  6  const CreatePassport = () => {
  7    const [formData, setFormData] = useState({
  8      credentialId: "",
  9      credentialType: "",
 10      firstName: "",
 11      lastName: "",
 12      email: "",
 13      phoneNumber: "",
 14      issuer: "",
 15      issuanceDate: "",
 16      organizationType: "",
 17      organizationName: "",
 18      organizationDescription: "",
 19      organizationUrl: ""
 20    });
 21    const [organizationLogo, setOrganizationLogo] = useState(null);
 22    const [organizationLogoBase64, setOrganizationLogoBase64] = useState("");
 23    const {
 24            firstName,
 25            lastName,
 26            email,
 27            phoneNumber,
 28            issuanceDate,
 29            issuer,
 30            organizationType,
 31            organizationName,
 32            organizationDescription,
 33            organizationUrl
 34          } = formData;
 35          
 36    const credentialId = "1d15"
 37    const credentialType = "CorporateLei"
 38  
 39    const { principalId } = useAuth();
 40    console.log('Principal Id in passport: ', principalId);
 41  
 42    const addPassportData = async () => {
 43      try {
 44        await PassportDB.passportDetails.add({
 45          credentialId: credentialId,
 46          credentialType: credentialType,
 47          issuanceDate: issuanceDate,
 48          issuer: issuer,
 49          firstName: firstName,
 50          lastName: lastName,
 51          principalId: principalId,
 52          email: email,
 53          phoneNumber: phoneNumber,
 54          organizationType: organizationType,
 55          organizationName: organizationName, 
 56          organizationUrl: organizationUrl,
 57          organizationLogo: organizationLogoBase64
 58        }); 
 59      } catch (error) {
 60        console.log("Could not add passport details to passport database: ", error)
 61      }
 62    }
 63  
 64    const passportDataJson = {
 65      "name": "Passport",
 66      "description": "A signed business card meant to represent a person working for an organization",
 67      "relatedLink": [
 68        {
 69          "type": [
 70            "LinkRole"
 71          ],
 72          "target": "https://example.com/organizations/example-org/presentations/available",
 73          "linkRelationship": "OrganizationPresentationEndpoint"
 74        }
 75      ],
 76      "credentialSchema": {
 77        "id": credentialId,
 78        "type": credentialType,
 79      },
 80      "issuanceDate": issuanceDate,
 81      "issuer": issuer,
 82      "credentialSubject": {
 83        "type": [
 84          "Person"
 85        ],
 86        "firstName": firstName,
 87        "lastName": lastName,
 88        "email": email,
 89        "phoneNumber": phoneNumber,
 90        "worksFor": {
 91          "type": [
 92            organizationType
 93          ],
 94          "name": organizationName,
 95          "description": organizationDescription,
 96          "url": organizationUrl,
 97          "logo": organizationLogoBase64
 98        }
 99      }
100    }
101  
102    const fetchPassportData = async () => {
103      try {
104        const passportData = await PassportDB?.passportDetails.toArray();
105        console.log(
106          "Passport Data: ", passportData,
107          "Passport Data Json: ", passportDataJson
108        )
109      } catch (error) {
110        console.log("Could not fetch passport data from database: ", error);
111      }
112    }
113    
114    const handleFormChange = (event) => {
115     const { name, value } = event.target;
116     setFormData((prevData)=>({
117      ...prevData, 
118      [name]: value,
119     }));
120    };
121  
122    const handleOrganizationLogoChange = (event) => {
123      const selectedFile = event.target.files[0];
124    
125      if (selectedFile) {
126        setOrganizationLogo(selectedFile);
127        const reader = new FileReader();
128        reader.onloadend = () => {
129          const base64Logo = reader.result;
130          setOrganizationLogoBase64(base64Logo);
131          console.log("Base64 Logo:", base64Logo);
132        };
133        reader.readAsDataURL(selectedFile);
134      }
135    };
136    
137    const handleSubmit = (event) => {
138      event.preventDefault();
139      console.log("Form Data: ....",formData);
140      addPassportData();
141      console.log("....Submitting......");
142      fetchPassportData();
143    };
144  
145    return (
146      <>
147        <div className={styles.BusinessCard}>
148          <h1 className={styles.formTitle}>Passport</h1>
149          <form onSubmit={handleSubmit}>
150          <div className={styles.formGroup}>
151              <div className={styles.logoInputContainer}>
152                {organizationLogoBase64 && (
153                  <img
154                    src={organizationLogoBase64}
155                    className={styles.logoPreview}
156                    alt="organization logo"
157                  />
158                )}
159                <label htmlFor="organizationLogo" className={styles.logoUpload}>
160                  <span>{organizationLogo ? "Update logo" : "Add logo"}</span>
161                  <input
162                    accept="image/jpeg, image/jpg, image/png, image/webp"
163                    type="file"
164                    name="organizationLogo"
165                    id="organizationLogo"
166                    onChange={handleOrganizationLogoChange}
167                    className={styles.logoInput}
168                  />
169                  <svg
170                    aria-hidden="true"
171                    focusable="false"
172                    data-prefix="fas"
173                    data-icon="image"
174                    role="img"
175                    xmlns="http://www.w3.org/2000/svg"
176                    viewBox="0 0 512 512"
177                  >
178                    <path
179                      fill="currentColor"
180                      d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"
181                    ></path>
182                  </svg>
183                </label>
184              </div>
185            </div>
186            <div className={styles.formGroup}>
187              <label htmlFor="firstName" className={styles.formLabel}>
188                First Name:
189              </label>
190              <input
191                type="text"
192                name="firstName"
193                value={firstName}
194                onChange={handleFormChange}
195                className={styles.formInput}
196              />
197            </div>
198            <div className={styles.formGroup}>
199              <label htmlFor="lastName" className={styles.formLabel}>
200                Last Name:
201              </label>
202              <input
203                type="text"
204                name="lastName"
205                value={lastName}
206                onChange={handleFormChange}
207                className={styles.formInput}
208              />
209            </div>
210            <div className={styles.formGroup}>
211              <label htmlFor="email" className={styles.formLabel}>
212                Email:
213              </label>
214              <input
215                type="text"
216                name="email"
217                value={email}
218                onChange={handleFormChange}
219                className={styles.formInput}
220              />
221            </div>
222            <div className={styles.formGroup}>
223              <label htmlFor="phoneNumber" className={styles.formLabel}>
224                Phone No:
225              </label>
226              <input
227                type="text"
228                name="phoneNumber"
229                value={phoneNumber}
230                onChange={handleFormChange}
231                className={styles.formInput}
232              />
233            </div>
234            <div className={styles.formGroup}>
235              <label htmlFor="issuanceDate" className={styles.formLabel}>
236                Issuance Date:
237              </label>
238              <input
239                type="date"
240                name="issuanceDate"
241                value={issuanceDate}
242                onChange={handleFormChange}
243                className={styles.formInput}
244              />
245            </div>
246            <div className={styles.formGroup}>
247              <label htmlFor="issuerId" className={styles.formLabel}>
248                Issuer:
249              </label>
250              <input
251                type="text"
252                name="issuer"
253                value={issuer}
254                onChange={handleFormChange}
255                className={styles.formInput}
256              />
257            </div>
258            {/* works for */}
259            <div className={styles.formGroup}>
260              <label htmlFor="organizationType" className={styles.formLabel}>
261                Organization Type:
262              </label>
263              <select
264                name="organizationType"
265                value={organizationType}
266                onChange={handleFormChange}
267                className={styles.formInput}
268              >
269                <option value="type1">Type 1</option>
270                <option value="type2">Type 2</option>
271              </select>
272            </div>
273            <div className={styles.formGroup}>
274              <label htmlFor="organizationName" className={styles.formLabel}>
275                Organization Name:
276              </label>
277              <input
278                type="text"
279                name="organizationName"
280                value={organizationName}
281                onChange={handleFormChange}
282                className={styles.formInput}
283              />
284            </div>
285            <div className={styles.formGroup}>
286              <label htmlFor="organizationDescription" className={styles.formLabel}>
287                Organization Description:
288              </label>
289              <textarea
290                type="text"
291                name="organizationDescription"
292                value={organizationDescription}
293                onChange={handleFormChange}
294                rows={4}
295                cols={50}
296                className={styles.formInput}
297              />
298            </div>
299            <div className={styles.formGroup}>
300              <label htmlFor="organizationUrl" className={styles.formLabel}>
301                Organization url:
302              </label>
303              <input
304                type="text"
305                name="organizationUrl"
306                value={organizationUrl}
307                onChange={handleFormChange}
308                className={styles.formInput}
309              />
310            </div>
311            <button type="submit" className={styles.submitButton}>
312              Submit
313            </button>
314          </form>
315        </div>
316      </>
317    );
318  };
319  
320  export default CreatePassport;