import { Link } from "preact-router/match"
import {getPicture} from "../utilities/pictures"
import {InputField, TextAreaField} from "./Form"
import {Button} from "./Button"
import {useState} from "preact/hooks"
import {Text} from "./Translation"

export const PlantThumb = ({ plant, children }) => {

    return <Link href={`/plant/${plant.id}`} class="block h-48 cursor-pointer">
            <div className="group bg-primary-light relative rounded shadow-lg flex flex-col">
                <img src={getPicture(plant.id)} alt="" className="object-cover h-48 w-full min-h-48 min-w-48 rounded" />
                <div className="bg-primary group-hover:bg-primary-dark text-white p-2 text-center absolute bottom-0 w-full rounded-bl rounded-br">
                    {children}
                </div>
                <div title="Actions" className="absolute right-2 top-2 rounded-full flex justify-center items-center bg-primary group-hover:bg-primary-dark w-6 h-6">
                    {plant.actions.length}
                </div>
            </div>
    </Link>
}

export const PlantForm = ({children, plant, ...props}) => {

    const [plantForm, setPlantForm] = useState(plant)

    return <form onSubmit={e => props.onChange(e, plantForm)}>

        <InputField name="name"
                    className="mb-2 mt-5"
                    value={plantForm.name}
                    onChange={(e) => setPlantForm({ ...plantForm, name: e.target.value }) }>
            <Text text="Name" />
        </InputField>
        <TextAreaField name="description"
                       className="mb-5"
                       value={plantForm.description}
                       onChange={(e) => setPlantForm({ ...plantForm, description: e.target.value })}>
            <Text text="Description" />
        </TextAreaField>

        <fieldset className="mb-5 flex gap-2 max-w-[300px] mx-auto">
            <div className="flex-1">
                <input id="indoor"
                       name="indoor"
                       type="radio"
                       checked={plantForm.indoor === true}
                       onChange={() => setPlantForm({ ...plantForm, indoor: true })}
                       className="sr-only peer"
                />
                <label htmlFor="indoor" className="w-full block peer-checked:bg-blue-700 bg-blue-500 hover:bg-blue-700 px-2 py-1 text-center rounded border dark:border-white">
                    <Text text="Indoor" />
                </label>
            </div>

            <div className="flex-1">
                <input id="outdoor"
                       name="outdoor"
                       type="radio"
                       checked={plantForm.indoor === false}
                       onChange={() => setPlantForm({ ...plantForm, indoor: false })}
                       className="sr-only peer"
                />
                <label htmlFor="outdoor" className="w-full block peer-checked:bg-blue-700 bg-blue-500 hover:bg-blue-700 px-2 py-1 text-center rounded border dark:border-white">
                    <Text text="Outdoor" />
                </label>
            </div>
        </fieldset>

        <InputField name="spot"
                    className="mt-5"
                    value={plantForm.spot}
                    onChange={(e) => setPlantForm({ ...plantForm, spot: e.target.value }) }>
            <Text text="Spot" />
        </InputField>

        <Button type="submit" className="block w-full mt-5 mb-2 bg-green-800 hover:bg-green-900 text-white mx-auto px-2 py-1 shadow">
            { children }
        </Button>
    </form>
}