<?php

namespace Anbarak;

class Input
{
    public static function render($props = [])
    {
        $defaults = [
            'type'         => 'text',
            'name'         => '',
            'id'           => '',
            'value'        => '',
            'class'        => '',
            'attrs'        => '',
            'label'        => '',
            'placeholder'  => '',
            'parent_class' => '',
            'form'         => ''
        ];
        
        $props = array_merge($defaults, $props);


?>
        <div class="anbarak-input inline-flex px-4 rounded-xl <?php echo esc_attr($props['parent_class']) ?> <?php if ($props['label']): ?> with-label <?php endif ?>">
            <input
                id="<?php echo esc_attr($props['id']) ?>"
                placeholder=" "
                <?php if ($props['form']): ?>
                form="<?php echo esc_attr($props['form']) ?>"
                <?php endif ?>
                type="<?php echo esc_attr($props['type']) ?>"
                name="<?php echo esc_attr($props['name']) ?>"
                value="<?php echo esc_attr($props['value']) ?>"
                class="text-sm m-0 p-0 bg-transparent border-none outline-none <?php echo esc_attr($props['class']) ?>" <?php echo wp_kses_post($props['attrs']) ?>>
            <?php if ($props['label']): ?>
                <span class="anbarak-input__label absolute"><?php echo esc_attr($props['label']) ?></span>
            <?php endif ?>
            <?php if ($props['placeholder']): ?>
                <span class="anbarak-input__placeholder text-sm absolute text-gray-500"><?php echo esc_attr($props['placeholder']) ?></span>
            <?php endif ?>
        </div>
<?php
    }

    public static function renderDatePicker($props = [])
    {
        self::renderDateTimeControl($props, false);
    }

    public static function renderDateTimePicker($props = [])
    {
        self::renderDateTimeControl($props, true);
    }

    public static function renderSearchDropdown($props = [])
    {
        $defaults = [
            'type'               => 'text',
            'name'               => '',
            'id'                 => '',
            'value'              => '',
            'class'              => '',
            'attrs'              => '',
            'label'              => '',
            'placeholder'        => '',
            'parent_class'       => '',
            'form'               => '',
            'action'             => '',
            'hidden_name'        => '',
            'hidden_value'       => '',
            'min_length'         => 2,
            'empty_text'         => __('Nothing found', 'anbarak'),
            'readonly_on_select' => false,
        ];

        $props = array_merge($defaults, $props);
        $root_classes = trim('selectx selectx--single relative ' . $props['parent_class']);
        $input_classes = trim('selectx-input text-sm m-0 p-0 bg-transparent border-none outline-none ' . $props['class']);
?>
        <div
            class="<?php echo esc_attr($root_classes) ?>"
            data-action="<?php echo esc_attr($props['action']) ?>"
            data-min-length="<?php echo (int) $props['min_length'] ?>"
            data-empty-text="<?php echo esc_attr($props['empty_text']) ?>"
            data-readonly-on-select="<?php echo esc_attr($props['readonly_on_select'] ? '1' : '0') ?>"
        >
            <div class="anbarak-input inline-flex px-4 rounded-xl w-full <?php if ($props['label']): ?> with-label <?php endif ?>">
                <input
                    id="<?php echo esc_attr($props['id']) ?>"
                    placeholder=" "
                    <?php if ($props['form']): ?>
                    form="<?php echo esc_attr($props['form']) ?>"
                    <?php endif ?>
                    type="<?php echo esc_attr($props['type']) ?>"
                    name="<?php echo esc_attr($props['name']) ?>"
                    value="<?php echo esc_attr($props['value']) ?>"
                    class="<?php echo esc_attr($input_classes) ?>" <?php echo wp_kses_post($props['attrs']) ?>>
                <?php if ($props['label']): ?>
                    <span class="anbarak-input__label absolute"><?php echo esc_html($props['label']) ?></span>
                <?php endif ?>
                <?php if ($props['placeholder']): ?>
                    <span class="anbarak-input__placeholder text-sm absolute text-gray-500"><?php echo esc_html($props['placeholder']) ?></span>
                <?php endif ?>
                <div class="selectx-items"></div>
            </div>
            <?php if ($props['hidden_name']): ?>
                <input
                    type="hidden"
                    class="selectx-value"
                    name="<?php echo esc_attr($props['hidden_name']) ?>"
                    value="<?php echo esc_attr($props['hidden_value']) ?>"
                    <?php if ($props['form']): ?>
                    form="<?php echo esc_attr($props['form']) ?>"
                    <?php endif ?>
                >
            <?php endif ?>
            <ul class="selectx-list absolute start-0 end-0 top-full z-30 mt-1 hidden max-h-60 overflow-y-auto rounded-xl border border-gray-200 bg-white p-1 shadow-lg dark:border-[#333] dark:bg-[#1a1a1a]"></ul>
        </div>
<?php
    }

    private static function renderDateTimeControl($props = [], $with_time = false)
    {
        $defaults = [
            'name'             => '',
            'timestamp_name'   => '',
            'timestamp'        => '',
            'value'            => '',
            'class'            => '',
            'hidden_class'     => '',
            'attrs'            => '',
            'parent_class'     => '',
            'label'            => '',
            'placeholder'      => '',
            'id'               => '',
            'form'             => '',
        ];

        $props = array_merge($defaults, $props);
        $timestamp_name = $props['timestamp_name'] ?: $props['name'] . '-ts';
        $timestamp = '' !== $props['timestamp'] ? (int) $props['timestamp'] : '';
        $timestamp_ms = '' !== $timestamp ? $timestamp * 1000 : '';

        if (!$props['value'] && '' !== $timestamp) {
            $props['value'] = anbarak_date_format($with_time ? 'Y/m/d H:i:s' : 'Y/m/d', $timestamp);
        }

        $control_class = $with_time ? 'datetime-picker' : 'date-picker';
        $props['class'] = trim($props['class'] . ' ' . $control_class);
        $props['attrs'] = trim($props['attrs'] . ' data-timestamp-field="' . esc_attr($timestamp_name) . '"');

        self::render($props);
?>
        <input
            type="hidden"
            name="<?php echo esc_attr($timestamp_name) ?>"
            class="<?php echo esc_attr(trim($props['hidden_class'] . ' date-picker-timestamp')) ?>"
            value="<?php echo esc_attr($timestamp_ms) ?>"
            <?php if ($props['form']): ?>
            form="<?php echo esc_attr($props['form']) ?>"
            <?php endif ?>
        >
<?php
    }
}
