import AreaAdd from '@components/AreaAdd'
import TextInput from '@components/common/TextInput'
import { createForm } from '@felte/solid'
import { validator } from '@felte/validator-yup'
import useLanguage from '@hooks/useLanguage'
import { A } from '@solidjs/router'
import {
  IconAddressBook,
  IconHomePlus,
  IconIcons,
  IconTag,
} from '@tabler/icons-solidjs'
import * as yup from 'yup'

const houseSchema = (language, isRequired) =>
  yup.object({
    icon: yup.string().required(isRequired(language.ui.houseIcon)),
    name: yup.string().required(isRequired(language.ui.houseName)),
    address: yup.string().required(isRequired(language.ui.houseAddress)),
    areas: yup.array().required(isRequired(language.ui.areas)),
  })

export default function HouseCreate() {
  const { language, isRequired } = useLanguage()
  const { form, errors } = createForm({
    extend: [validator({ schema: houseSchema(language, isRequired) })],
    onSubmit: async (values) => {
      console.log(values)
    },
  })

  return (
    <div class="house-create">
      <div class="text-sm breadcrumbs mb-2">
        <ul>
          <li>
            <A href="/house">{language.ui.house}</A>
          </li>
          <li>{language.ui.newHouse}</li>
        </ul>
      </div>
      <div class="flex items-center gap-2 mb-5 text-xl">
        <span class="text-secondary">
          <IconHomePlus size={30} />
        </span>
        {language.ui.newHouse}
      </div>
      <div class="card w-full bg-base-100 shadow-lg border border-gray-200">
        <div class="card-body">
          <form autoComplete="off" use:form>
            <div class="grid gap-4 grid-cols-1 lg:grid-cols-2">
              <div class="col-auto">
                <TextInput
                  icon={IconIcons}
                  name="icon"
                  label={language.ui.houseIcon}
                  labelClass="md:w-40"
                  placeholder={language.ui.houseIcon}
                  error={errors('icon')}
                >
                  <div class="label">
                    <a
                      class="label-text link link-info"
                      href="https://tabler.io/icons"
                      target="_blank"
                    >
                      {language.ui.findIconHere}
                    </a>
                  </div>
                </TextInput>
              </div>
              <div class="col-auto">
                <TextInput
                  icon={IconTag}
                  name="name"
                  label={language.ui.houseName}
                  labelClass="md:w-40"
                  placeholder={language.ui.houseName}
                  error={errors('name')}
                />
              </div>
              <div class="col-auto lg:col-span-2">
                <TextInput
                  icon={IconAddressBook}
                  name="address"
                  label={language.ui.houseAddress}
                  labelClass="md:w-40"
                  placeholder={language.ui.houseAddress}
                  error={errors('address')}
                />
              </div>
              <div class="col-auto lg:col-span-2">
                <AreaAdd name="areas" error={errors('areas')} />
              </div>
            </div>
            <div class="card-actions">
              <button type="submit" class="btn btn-primary">
                {language.ui.create}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}
