From 66d170984827a1fe0fef7ac0578bbf2e839f8c5d Mon Sep 17 00:00:00 2001
From: Mohamed Daahir <sharaf.13@hotmail.com>
Date: Mon, 1 Jan 2024 21:22:40 +0000
Subject: [PATCH] support selecting cv template

---
 src/components/generator/form/Form.tsx        |  6 ++--
 .../form/sections/TemplatesSection.tsx        | 32 +++++++++++++++++++
 .../generator/templates/Templates.tsx         | 14 --------
 src/lib/templates/constants.ts                | 12 +++++++
 4 files changed, 47 insertions(+), 17 deletions(-)
 create mode 100644 src/components/generator/form/sections/TemplatesSection.tsx
 delete mode 100644 src/components/generator/templates/Templates.tsx

diff --git a/src/components/generator/form/Form.tsx b/src/components/generator/form/Form.tsx
index a7a0d238..669ab240 100644
--- a/src/components/generator/form/Form.tsx
+++ b/src/components/generator/form/Form.tsx
@@ -4,6 +4,7 @@ import { FormProvider, useForm } from 'react-hook-form'
 import { useAtom } from 'jotai'
 import styled from 'styled-components'
 
+import { TemplatesSection } from './sections/TemplatesSection'
 import { ProfileSection } from './sections/ProfileSection'
 import { EducationSection } from './sections/EducationSection'
 import { WorkSection } from './sections/WorkSection'
@@ -34,7 +35,7 @@ const initialFormValues: FormValues = {
 
 export function Form() {
   const router = useRouter()
-  const { section: currSection } = router.query
+  const { section: currSection = 'basics' } = router.query
 
   const [resume, setResume] = useAtom(resumeAtom)
   const formContext = useForm<FormValues>({ defaultValues: initialFormValues })
@@ -70,9 +71,8 @@ export function Form() {
       <StyledForm
         id="resume-form"
         onSubmit={formContext.handleSubmit(handleFormSubmit)}
-        // onChange={handleFormSubmit}
       >
-        {!currSection && <ProfileSection />}
+        {currSection === 'templates' && <TemplatesSection />}
         {currSection === 'basics' && <ProfileSection />}
         {currSection === 'education' && <EducationSection />}
         {currSection === 'work' && <WorkSection />}
diff --git a/src/components/generator/form/sections/TemplatesSection.tsx b/src/components/generator/form/sections/TemplatesSection.tsx
new file mode 100644
index 00000000..b36f6f10
--- /dev/null
+++ b/src/components/generator/form/sections/TemplatesSection.tsx
@@ -0,0 +1,32 @@
+import { useFormContext, Controller } from 'react-hook-form'
+
+import { FormSection } from './FormSection'
+import { TEMPLATES } from '../../../../lib/templates/constants'
+
+import { FormValues } from '../../../../types'
+
+export function TemplatesSection() {
+  const { control } = useFormContext<FormValues>()
+
+  return (
+    <FormSection title="Choose a Template">
+      {TEMPLATES.map((templateId) => (
+        <label key={templateId} style={{ display: 'inline-block', padding: 8 }}>
+          Template {templateId}
+          <Controller
+            control={control}
+            name="selectedTemplate"
+            render={({ field }) => (
+              <input
+                type="radio"
+                onChange={(e) => field.onChange(Number(e.target.value))}
+                value={templateId}
+                checked={field.value === templateId}
+              />
+            )}
+          />
+        </label>
+      ))}
+    </FormSection>
+  )
+}
diff --git a/src/components/generator/templates/Templates.tsx b/src/components/generator/templates/Templates.tsx
deleted file mode 100644
index c0ce916c..00000000
--- a/src/components/generator/templates/Templates.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import styled from 'styled-components'
-import { colors, sizes } from '../../../theme'
-
-const Section = styled.section`
-  width: ${sizes.templatesSection.width};
-  background: ${colors.background};
-  border-left: 1px solid rgba(0, 0, 0, 0.5);
-  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-  overflow-y: scroll;
-`
-
-export function Templates() {
-  return <Section></Section>
-}
diff --git a/src/lib/templates/constants.ts b/src/lib/templates/constants.ts
index 5703ef18..497fa32e 100755
--- a/src/lib/templates/constants.ts
+++ b/src/lib/templates/constants.ts
@@ -9,5 +9,17 @@ export const TEMPLATE8 = 8
 export const TEMPLATE9 = 9
 export const TEMPLATE10 = 10
 
+export const TEMPLATES = [
+  TEMPLATE1,
+  TEMPLATE2,
+  TEMPLATE3,
+  TEMPLATE4,
+  TEMPLATE5,
+  TEMPLATE6,
+  TEMPLATE7,
+  TEMPLATE8,
+  TEMPLATE9
+]
+
 export const NEWLINE = '\\\\'
 export const WHITESPACE = '\\ '