import React from 'react';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker as MuiTimePicker } from '@mui/x-date-pickers/TimePicker';
import { MobileTimePicker as MuiMobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
import { DesktopTimePicker as MuiDesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
import { styled } from '@mui/material/styles';

import 'dayjs/locale/pt-br';
import 'dayjs/locale/en';
import 'dayjs/locale/es';

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

import 'dayjs/locale/pt-br';
import 'dayjs/locale/en';
import 'dayjs/locale/es';
import { TimePickerBaseProps } from '@/interfaces/TimePicker';

dayjs.extend(utc);
dayjs.extend(timezone);

const MuiTimePickerStyled = styled(MuiTimePicker)({
  '& .MuiOutlinedInput-notchedOutline': {
    border: 'none',
    borderRadius: 0,
    borderBottom: '1px solid #666666',
  },
  '& .MuiFormLabel-root': {
    backgroundColor: '#fff',
    padding: '0 5px',
  },
});

const MuiMobileTimePickerStyled = styled(MuiMobileTimePicker)({
  '& .MuiOutlinedInput-notchedOutline': {
    border: 'none',
    borderRadius: 0,
    borderBottom: '1px solid #666666',
  },
  '& .MuiFormLabel-root': {
    backgroundColor: '#fff',
    padding: '0 5px',
  },
});

const MuiDesktopTimePickerStyled = styled(MuiDesktopTimePicker)({
  '& .MuiOutlinedInput-notchedOutline': {
    border: 'none',
    borderRadius: 0,
    borderBottom: '1px solid #666666',
  },
  '& .MuiFormLabel-root': {
    backgroundColor: '#fff',
    padding: '0 5px',
  },
});

export const TimePicker = ({
  label,
  timezone = 'America/Sao_Paulo',
  language = 'pt-br',
  variant = 'desktop',
}: TimePickerBaseProps) => {

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
      <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
        {variant === 'responsive' && <MuiTimePickerStyled label={label} timezone={timezone} />}
        {variant === 'mobile' && <MuiMobileTimePickerStyled label={label} timezone={timezone} />}
        {variant === 'desktop' && <MuiDesktopTimePickerStyled label={label} timezone={timezone} />}
      </DemoContainer>
    </LocalizationProvider>
  );
};