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 { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
import { MobileDatePicker as MuiMobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
import { DesktopDatePicker as MuiDesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { DatePickerBaseProps } from '../interfaces';
import { styled } from '@mui/material/styles';

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

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

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

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

export const DatePicker = ({
  label,
  format = 'DD/MM/YYYY',
  language = 'pt-br',
  variant = 'desktop',
}: DatePickerBaseProps) => {
  
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
      <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
        {variant === 'responsive' && <MuiDatePickerStyled label={label} format={format} />}
        {variant === 'mobile' && <MuiMobileDatePickerStyled label={label} format={format} />}
        {variant === 'desktop' && <MuiDesktopDatePickerStyled label={label} format={format} />}
      </DemoContainer>
    </LocalizationProvider>
  );
};