import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { TIME_RANGES } from './constants';

export const TimeRangeSelector = ({
    selectedRange,
    handleRangeChange,
    startDate,
    setStartDate,
    endDate,
    setEndDate,
    useCustomRange,
    handleCustomRangeChange,
    handleResetZoom
}) => {
    return (
        <div style={{
            display: 'flex',
            flexWrap: 'wrap',
            gap: '15px',
            alignItems: 'center',
            marginBottom: '15px'
        }}>
            {/* Стандартные диапазоны */}
            <div style={{ flex: '1 1 200px', display: 'flex', gap: '10px', alignItems: 'flex-end' }}>
                <div style={{ flex: '1' }}>
                    <label htmlFor="time-range" style={{
                        display: 'block',
                        marginBottom: '5px',
                        fontWeight: '500',
                        color: '#555'
                    }}>Стандартные диапазоны:</label>
                    <select
                        id="time-range"
                        value={selectedRange.value}
                        onChange={handleRangeChange}
                        style={{
                            width: '100%',
                            padding: '8px 12px',
                            borderRadius: '4px',
                            border: '1px solid #ddd',
                            color: "#333",
                            backgroundColor: '#f9f9f9'
                        }}
                    >
                        {TIME_RANGES.map(range => (
                            <option key={range.value} value={range.value}>{range.label}</option>
                        ))}
                    </select>
                </div>

                <button
                    onClick={handleResetZoom}
                    style={{
                        padding: '8px 16px',
                        backgroundColor: '#f0f0f0',
                        color: '#333',
                        border: '1px solid #ddd',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        transition: 'all 0.2s',
                        height: '36px',
                        whiteSpace: 'nowrap'
                    }}
                    onMouseOver={(e) => e.target.style.backgroundColor = '#e0e0e0'}
                    onMouseOut={(e) => e.target.style.backgroundColor = '#f0f0f0'}
                >
                    Сбросить
                </button>
            </div>

            {/* Кастомный диапазон */}
            <div style={{ flex: '1 1 300px' }}>
                <div style={{
                    marginBottom: '10px',
                    fontWeight: '500',
                    color: '#555'
                }}>
                    Или укажите свой диапазон:
                </div>
                <div style={{
                    display: 'flex',
                    gap: '10px',
                    flexWrap: 'wrap'
                }}>
                    <div style={{ flex: '1 1 200px' }}>
                        <DatePicker
                            selected={startDate}
                            onChange={(date) => setStartDate(date)}
                            showTimeSelect
                            timeFormat="HH:mm"
                            timeIntervals={15}
                            dateFormat="yyyy-MM-dd HH:mm"
                            placeholderText="Начальная дата"
                            customInput={
                                <input style={{
                                    backgroundColor: '#f9f9f9',
                                    color: "#555",
                                    width: '100%',
                                    padding: '8px 12px',
                                    borderRadius: '4px',
                                    border: '1px solid #ddd'
                                }} />
                            }
                        />
                    </div>
                    <div style={{ flex: '1 1 200px' }}>
                        <DatePicker
                            selected={endDate}
                            onChange={(date) => setEndDate(date)}
                            showTimeSelect
                            timeFormat="HH:mm"
                            timeIntervals={15}
                            dateFormat="yyyy-MM-dd HH:mm"
                            placeholderText="Конечная дата"
                            customInput={
                                <input style={{
                                    backgroundColor: '#f9f9f9',
                                    color: "#555",
                                    width: '100%',
                                    padding: '8px 12px',
                                    borderRadius: '4px',
                                    border: '1px solid #ddd'
                                }} />
                            }
                        />
                    </div>
                    <button
                        onClick={handleCustomRangeChange}
                        style={{
                            padding: '8px 16px',
                            backgroundColor: '#4a6baf',
                            color: 'white',
                            border: 'none',
                            borderRadius: '4px',
                            cursor: 'pointer',
                            transition: 'background-color 0.2s',
                            flex: '0 0 auto',
                            alignSelf: 'flex-end'
                        }}
                        onMouseOver={(e) => e.target.style.backgroundColor = '#3a5a9f'}
                        onMouseOut={(e) => e.target.style.backgroundColor = '#4a6baf'}
                    >
                        Применить
                    </button>
                </div>
            </div>
        </div>
    );
};