Form Components

export default function Input(props) {
  const { renderInput, data } = BaseInput(props);
  const type = props.type || inputType[(data?.format || "data").toLowerCase()] || "text";
  
  return renderInput((field) => {
    return (
      <>
        <FormLabel {...props} field={field} />
        <FormControl>
          <FormInput
            placeholder={data.placeholder || data.label}
            {...field}
            type={type}
            min={data.min}
            max={data.max}
            className={field.isInvalid ? invalidClass.border : ""}
          />
        </FormControl>
        {data.description && (
          <FormDescription>{data.description}</FormDescription>
        )}
      </>
    )
  });
}

export const inputType = {
  data: "text",
  text: "text",
  email: "email",
  decimal: "number",
  percent: "number",
  currency: "text",
  int: "number",
  long_int: "number",
  read_only: "text",
};

export default function MetaSelect(props) {
  const [rows, setRows] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const { renderInput, data } = BaseInput(props);

  const isLocal = useMemo(() => {
    const options = data.options;
    return !options || typeof options === "object" || options.includes("\n");
  }, [data.options]);

  const getServerData = useCallback((q, page = 1, append = false) => {
    return new Promise((resolve, reject) => {
      loopar.send({
        action: `/desk/${getModel()}/search`,
        params: { q, page, limit: paginationRef.current.limit },
        success: (r) => {
          titleFields.current = r.title_fields;
          const preparedRows = getPrepareOptions(
            r.rows.map(row => ({
              value: row.name, 
              formattedValue: row.formattedValue,
              label: row 
            }))
          );
          setRows(prevRows => append ? [...prevRows, ...preparedRows] : preparedRows);
          resolve(preparedRows);
        },
      });
    });
  }, [data.disabled, getModel, getPrepareOptions]);

  return renderInput((field) => (
    <>
      <FormLabel {...props} field={field} />
      <Select
        field={field}
        options={rows}
        search={search}
        loadMore={loadMore}
        data={data}
        onSelect={field.onChange}
        isLoading={isLoading}
      />
    </>
  ));
}

export default function MetaCheckbox(props) {
  return <DefaultCheckbox {...props} />
}

export default function DatePicker(props) {
  const { renderInput, data, value } = BaseInput(props);
    
  return renderInput(field => {
    const fieldDate = new Date(field.value);

    const setDateHandler = (val) => {
      const newDate = dayjs(new Date(val));
      const [year, month, day] = [newDate.year(), newDate.month() + 1, newDate.date()];
      const date = dayjs(field.value).toDate();
      date.setFullYear(year);
      date.setMonth(month - 1);
      date.setDate(day);
      value(date);
    }
    
    return (
      <FormItem className="flex flex-col">
        <FormLabel>{data.label}</FormLabel>
        <Popover>
          <PopoverTrigger asChild>
            <FormControl>
              <Button variant={"outline"}>
                {field.value ? (
                  format(dayjs(fieldDate).isValid() ? fieldDate : new Date(), "PPP HH:mm:ss a")
                ) : (
                  <span>Pick a date</span>
                )}
                <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
              </Button>
            </FormControl>
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0" align="start">
            <Calendar
              mode="single"
              selected={fieldDate}
              onSelect={setDateHandler}
              disabled={(date) =>
                date > new Date() || date < new Date("1900-01-01")
              }
              initialFocus
            />
          </PopoverContent>
        </Popover>
      </FormItem>
    )
  });
}

export default function MetaButton(props){
  const data = props.data || {};
  const {docRef} = useDocument();

  const handleClick = (e) => {
    e.preventDefault();
    
    if (data.action && docRef) {
      if(!docRef[data.action]) {
        loopar.throw("Action not Defined",`Action ${data.action} not found in model`)
      }
      docRef[data.action]();
    }
  }

  return (
    <Button
      {...loopar.utils.renderizableProps(props)}
      variant={getVariant()}
      onClick={handleClick}
    >
      {data.label || "Button"}
    </Button>
  );
}

class DataInterface {
  validatorRules() {
    var type = (this.element === INPUT ? this.data.format || this.element : this.element) || 'text';
    type = type.charAt(0).toUpperCase() + type.slice(1);

    if (this['is' + type]) {
      return this['is' + type]();
    }

    return { valid: true };
  }

  isEmail() {
    var regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@/;
    return {
      valid: regex.test(this.value),
      message: 'Invalid email address'
    }
  }

  validatorRequired() {
    const required = [true, 'true', 1, '1'].includes(this.data.required);
    return {
      valid: !required || !(typeof this.value == "undefined" || this.value.toString().length === 0),
      message: `${this.__label()} is required`
    }
  }
}