import { useLocale } from '../Locale/locale';
import { IconXCalendar1 } from '../../icons';
import dayjs from 'dayjs';
import React, { useCallback, useContext, useMemo } from 'react';
import DatePicker from '../../core/date-picker';
import { DatePickerProps } from './interface';
import Input from '../Input';
import { InputProps } from '../Input/interface';
import { Pressable, StyleProp, View, ViewStyle } from 'react-native';
import createStyles from './styles/input.style';
import { useTheme } from '../Theme';
import { PortalContext } from '../../core/portal/portal-host';

export const mapDateModToDayjs = {
  'Y': 'YYYY',
  'Y-M': 'YYYY-MM',
  'Y-D': 'YYYY-MM-DD',
  'Y-h': 'YYYY-MM-DD HH',
  'Y-m': 'YYYY-MM-DD HH:mm',
  'Y-s': 'YYYY-MM-DD HH:mm:ss',
  'M': 'MM',
  'M-D': 'MM-DD',
  'M-h': 'MM-DD HH',
  'M-m': 'MM-DD HH:mm',
  'M-s': 'MM-DD HH:mm:ss',
  'D': 'DD',
  'D-h': 'DD HH',
  'D-m': 'DD HH:mm',
  'D-s': 'DD HH:mm:ss',
  'h': 'HH',
  'h-m': 'HH:mm',
  'h-s': 'HH:mm:ss',
  'm': 'mm',
  'm-s': 'mm:ss',
  's': 'ss',
};

export type DatePickerInputProps = Omit<DatePickerProps, 'onConfirm'> & {
  inputProps?: InputProps;
  disabled?: boolean;
  formatter?: (date: Date, mode: string) => string;
  status?: 'error';
  placeholder?: string;
  style?: StyleProp<ViewStyle>;
  onConfirm?: (value: Date) => void;
  value?: Date;
};

function DatePickerInput(props: DatePickerInputProps) {
  const langValues = useLocale().Selector;
  const styles = createStyles();
  const token = useTheme();
  const { tag } = useContext(PortalContext);

  const {
    placeholder = langValues.title,
    mode = 'Y-D',
    inputProps,
    disabled,
    status,
    style,
    defaultValue,
    formatter,
    ...resetProps
  } = props;
  const dateValue = props.value;

  const onPress = useCallback(() => {
    if (disabled) return;
    DatePicker({
      defaultValue: dateValue
        ? dayjs(dateValue).toDate()
        : defaultValue || new Date(),
      title: langValues.title,
      mode: mode,
      portalTag: tag,
      ...resetProps,
    });
  }, [dateValue, mode, resetProps]);

  const formattedValue = useMemo(() => {
    if (!dateValue) return undefined;
    const date = dayjs(dateValue).toDate();
    return formatter
      ? formatter(date, mode)
      : dayjs(dateValue).format(mapDateModToDayjs[mode]);
  }, [dateValue, formatter, mode]);

  return (
    <View style={[styles.wrapper, style]}>
      <Input
        value={formattedValue}
        placeholder={placeholder}
        autoPressFocus={false}
        disabledPress
        readOnly
        status={status}
        suffix={
          <IconXCalendar1 fillColor={token['--color-text-5']} size={16} />
        }
        {...inputProps}
      />
      <Pressable disabled={disabled} onPress={onPress} style={styles.cover} />
    </View>
  );
}

export default DatePickerInput;