Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import { useForm } from 'react-hook-form'

import Datetime from 'react-datetime'

import { useGoals } from '@hooks'

import Modal from '@components/UI/modal/Modal'

import Input from '@components/UI/inputs/Input'

import Ckeditor from '@components/UI/Ckeditor'

import TagsInput from '@components/UI/TagsInput'

import 'react-datetime/css/react-datetime.css'

export function GoalModal() {

  const { toggleModal, showModal, addGoal } = useGoals()

  const habits = [

    {

      value: 1,

      name: 'Ejercicio Diario'

    },

    {

      value: 2,

      name: 'Leer 1 Hora'

    },

    {

      value: 3,

      name: 'Meditar'

    }

  ]

  const {

    control,

    handleSubmit,

    setValue,

    formState: { errors }

  } = useForm({

    defaultValues: {

      title: '',

      description: '',

      value: 1,

      finishDate: Date.now(),

      habits: []

    }

  })

  const onSubmit = handleSubmit(({ goal }) => addGoal(goal))

  return (

    <Modal

      show={showModal}

      title='Propósito'

      onClose={toggleModal}

      onAccept={onSubmit}

    >

      <Input

        name='title'

        label='Titulo'

        placeholder='Define el título de tu meta'

        control={control}

        rules={{ required: 'Este campo es requerido' }}

        error={errors.title?.message}

      />

      <Input

        type='number'

        name='value'

        label='Valor'

        placeholder='Define un valor a meta'

        control={control}

        rules={{ required: 'Este campo es requerido' }}

        error={errors.value?.message}

      />

      <TagsInput

        name='habits'

        label='Habitos'

        suggestions={habits}

        onChange={(tags) => setValue('habits', tags)}

      />

      <Datetime

        dateFormat='DD-MM-YYYY'

        timeFormat={false}

        inputProps={{ className: 'form-control' }}

        initialValue={Date.parse(new Date())}

        closeOnSelect

      />

      <Ckeditor

        label='Descripción'

        name='description'

        control={control}

        rules={{ required: 'Este campo es requerido' }}

        error={errors.description?.message}

      />

    </Modal>

  )

}