import React, { useState, useEffect, useCallback, useRef, memo } from 'react';

import { callInterceptor } from '../helpers';
import { usePersistFn } from '../hooks';
import {
  getDataType,
  buildOptions,
  buildSelectedValue,
} from '../picker-view/helper/picker';
import type { PickerValue, Column } from '../picker-view/interface';

import type { PickerMethodProps, PickerAction } from './interface';
// import Picker from './picker';

type ValueData = { values: PickerValue[]; columns: Column[] };

const buildValue = (
  values: PickerValue[],
  columns: Column[] | Column[][]
): ValueData => {
  const dataType = getDataType(columns);
  const [options] = buildOptions(dataType, columns, values);
  const [v, o] = buildSelectedValue(values, options);

  return {
    values: v,
    columns: o,
  };
};

const PickerMethod: React.FC<PickerMethodProps> = ({
  onCancel,
  onConfirm,
  onPressOverlay,
  beforeClose,
  pickerComponent,

  ...restProps
}) => {
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const Value = useRef<ValueData>(
    buildValue(restProps.defaultValue || [], restProps.columns)
  );

  useEffect(() => {
    setVisible(true);
  }, []);

  const onChange = useCallback((v: PickerValue[], c: Column[]) => {
    Value.current = {
      values: v,
      columns: c,
    };
  }, []);

  const doAction = usePersistFn((action: PickerAction) => {
    setLoading(true);

    callInterceptor(beforeClose, {
      args: [action, Value.current.values, Value.current.columns],
      done: () => {
        switch (action) {
          case 'cancel':
            onCancel?.(Value.current.values, Value.current.columns);
            break;
          case 'confirm':
            onConfirm?.(Value.current.values, Value.current.columns);
            break;
          case 'overlay':
            onPressOverlay?.(Value.current.values, Value.current.columns);
            break;
          default:
            break;
        }

        setLoading(false);
        setVisible(false);
      },
      canceled: () => {
        setLoading(false);
      },
    });
  });

  const onPressCancel = useCallback(() => {
    doAction('cancel');
  }, [doAction]);

  const onPressConfirm = useCallback(() => {
    doAction('confirm');
  }, [doAction]);

  const onPressPopupOverlay = useCallback(() => {
    doAction('overlay');
  }, [doAction]);

  const onRequestClose = useCallback(() => {
    onPressPopupOverlay();
    return true;
  }, [onPressPopupOverlay]);

  const Picker = pickerComponent;

  return (
    <Picker
      {...restProps}
      visible={visible}
      onChange={onChange}
      onCancel={onPressCancel}
      onConfirm={onPressConfirm}
      onPressOverlay={onPressPopupOverlay}
      loading={loading}
      onRequestClose={onRequestClose}
    />
  );
};

export default memo(PickerMethod);