import React, { useState, useRef, useCallback, useMemo } from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  SectionList,
  SectionListData,
} from 'react-native';
import { isNil, omit } from 'lodash';
import {
  FloatingLayer,
  ShouldRender,
  Button,
  Input,
  InputInstance,
  Loading,
} from '@xrnjs/ui';
import CheckboxItem from './CheckboxItem';
import createStyles from './styles/FlatSelect.style';
import { SelectProps, Option, Group } from './interface';
import { Type } from './enum';
import { IconXSearchfor1 } from '../../icons';
import { useLocale } from '../Locale/locale';
import { FloatingLayerRef } from '../FloatingLayer/interface';
import { useMaxHeight } from '../../utils';
import ErrorBlock from '../ErrorBlock/errorBlock';
import { useTheme } from '../Theme';
import sectionListGetItemLayout from '../IndexBar/getItemLayout';
import RedirectItem from './RedirectItem';
import {
  addLabelPosition,
  doFilterOptions,
  doFilterGroupOptions,
  isGroup,
  countOptions,
  groupsToSections,
  groupsToCheckboxSections,
} from './utils';

const SHOW_TIP_LIMIT = 10;
const ROW_HEIGHT = 56;
const HIGH_ROW_HEIGHT = 76;
const SECTION_HEADER_HEIGHT = 38;
const WINDOW_SIZE = 2;
const INIT_RENDER_NUM = 12;

const Select = ({
  type,
  visible,
  options,
  defaultValue = '',
  title,
  showFooter = true,
  showConfirmButton = false,
  value,
  currencySelectProps,
  showSearch = false,
  searchInputProps = {},
  cancelable = true,
  customFooter,
  contentStyle,
  itemFullContainer = false,
  showNoMoreTip = true,
  dataEmptyText,
  searchEmptyText,
  onPressOverlay,
  onConfirm,
  onCancel,
  onChange,
  onSearch,
  filterOption,
  onRepeatClick,
  showTipLimit = SHOW_TIP_LIMIT,
  loading,
  testID = '',
  onDisabledPress,
  extra,
  containerHeight,
  ...resetProps
}: SelectProps) => {
  const locale = useLocale();
  const [selectedValues, setSelectedValues] = useState<
    string | string[] | undefined
  >(value ?? defaultValue);
  const [searchValue, setSearchValue] = useState('');
  const searchRef = useRef<InputInstance>(null);
  const floatingLayerRef = useRef<FloatingLayerRef>(null);
  const maxHeight = useMaxHeight();
  const token = useTheme();
  const styles = useMemo(() => createStyles(token), [token]);

  // 有搜索框时，loading默认高度为480，否则为200
  const minHeight = showSearch ? 480 : 200;

  const filteredOptions = useMemo(() => {
    if (!searchValue || options?.length < 1) {
      return [...options];
    }
    if (isGroup(options as Group[])) {
      return doFilterGroupOptions(
        options as Group[],
        searchValue,
        filterOption
      );
    }
    return doFilterOptions(options as Option[], searchValue, filterOption);
  }, [options, searchValue, filterOption]);

  const nonGroupedCheckboxData = useMemo(() => {
    if (isGroup(filteredOptions as Group[])) return null;
    if (type !== Type.checkbox) return null;
    return addLabelPosition(filteredOptions as Option[], styles);
  }, [filteredOptions, type, styles]);

  const groupRedirectSections = useMemo(() => {
    if (!isGroup(filteredOptions as Group[])) return null;
    if (type !== Type.redirect) return null;
    return groupsToSections(filteredOptions as Group[]);
  }, [filteredOptions, type]);

  const groupCheckboxSections = useMemo(() => {
    if (!isGroup(filteredOptions as Group[])) return null;
    if (type !== Type.checkbox) return null;
    return groupsToCheckboxSections(filteredOptions as Group[], styles);
  }, [filteredOptions, type, styles]);

  const getRowHeight = useCallback(
    (item: Option) => {
      // 优先使用 Option.height
      if (typeof item?.height === 'number' && item.height > 0) {
        return item.height;
      }

      const hasHighContent = item?.subLabel || item?.prefixIcon;
      const baseHeight = hasHighContent ? HIGH_ROW_HEIGHT : ROW_HEIGHT;
      return baseHeight;
    },
    [itemFullContainer]
  );

  const sectionListLayoutRedirect = useMemo(
    () =>
      sectionListGetItemLayout({
        getItemHeight: (rowData) => getRowHeight(rowData as Option),
        getSeparatorHeight: () => 0,
        getSectionHeaderHeight: () => SECTION_HEADER_HEIGHT,
        getSectionFooterHeight: () => 0,
        listHeaderHeight: 0,
      }),
    [options, getRowHeight]
  );

  const sectionListLayoutCheckbox = useMemo(
    () =>
      sectionListGetItemLayout({
        getItemHeight: (rowData) => getRowHeight(rowData as Option),
        getSeparatorHeight: () => 0,
        getSectionHeaderHeight: () => SECTION_HEADER_HEIGHT,
        getSectionFooterHeight: () => 0,
        listHeaderHeight: 0,
      }),
    [options, getRowHeight]
  );

  const onChangeFn = useCallback(
    (values: string | string[]) => {
      if (type === Type.radio && !cancelable && isNil(values)) {
        onRepeatClick?.();
      } else {
        setSelectedValues(values);
        onChange?.(values);
      }
    },
    [type, cancelable, onRepeatClick, onChange]
  );

  const keyExtractor = useCallback((item: Option) => item.value, []);
  const multiple = type === Type.checkbox;
  const currentVal = !isNil(value) ? value : selectedValues;

  const flatListGetItemLayout = useCallback(
    (data: ArrayLike<Option> | null | undefined, index: number) => {
      const getLen = (i: number) =>
        getRowHeight((data?.[i] as Option) ?? ({} as Option));

      const length = getLen(index);
      let offset = 0;
      for (let i = 0; i < index; i += 1) {
        offset += getLen(i);
      }
      return { length, offset, index };
    },
    [getRowHeight]
  );

  const renderCheckboxItem = ({ item }: { item: Option }) => (
    <CheckboxItem
      item={item}
      multiple={multiple}
      currentVal={currentVal}
      testID={testID}
      searchValue={searchValue}
      itemFullContainer={itemFullContainer}
      styles={styles}
      onDisabledPress={onDisabledPress}
      onChangeFn={onChangeFn}
      rowHeight={getRowHeight(item)}
    />
  );

  const renderRedirectItem = ({ item }: { item: Option }) => (
    <RedirectItem
      option={item}
      testID={testID}
      itemFullContainer={itemFullContainer}
      currencySelectProps={currencySelectProps}
      onDisabledPress={onDisabledPress}
      onChangeFn={onChangeFn}
      searchValue={searchValue}
      styles={styles}
      rowHeight={getRowHeight(item)}
    />
  );

  const renderOptions = (data: Option[]) => {
    return (
      <FlatList
        data={data}
        keyExtractor={keyExtractor}
        renderItem={renderCheckboxItem}
        contentContainerStyle={[styles.checkboxGroupStyle, contentStyle]}
        ListFooterComponent={renderBottomTip()}
        initialNumToRender={INIT_RENDER_NUM}
        windowSize={WINDOW_SIZE}
        removeClippedSubviews={true}
        getItemLayout={flatListGetItemLayout}
      />
    );
  };

  const renderRedirectList = (currentOptions: Option[]) => {
    return (
      <FlatList
        data={currentOptions}
        keyExtractor={keyExtractor}
        renderItem={renderRedirectItem}
        contentContainerStyle={[styles.redirectContainer, contentStyle]}
        ListFooterComponent={renderBottomTip()}
        initialNumToRender={INIT_RENDER_NUM}
        windowSize={WINDOW_SIZE}
        removeClippedSubviews={true}
        getItemLayout={flatListGetItemLayout}
      />
    );
  };

  const renderNonGroupedList = (currentOptions: Option[]) => {
    return type === Type.redirect
      ? renderRedirectList(currentOptions)
      : renderOptions(
          nonGroupedCheckboxData ?? addLabelPosition(currentOptions, styles)
        );
  };

  const renderBottomTip = () => {
    const totalCount = countOptions(filteredOptions);
    if (showNoMoreTip && totalCount >= showTipLimit) {
      return (
        <View style={styles.buttomTipContainer}>
          <View style={styles.tipLine} />
          <Text style={styles.noDataText}>{locale.Select.noDataText}</Text>
          <View style={styles.tipLine} />
        </View>
      );
    }
    return null;
  };

  const onConfirmFn = () => {
    onConfirm?.(selectedValues as string | string[], searchValue);
  };

  const sectionListHeader = ({
    section,
  }: {
    section: SectionListData<
      Option,
      {
        title: React.ReactNode;
        data: Option[];
      }
    >;
  }) => (
    <View style={styles.groupItem}>
      <Text
        style={StyleSheet.flatten([
          styles.groupTitle,
          { height: SECTION_HEADER_HEIGHT },
        ])}
      >
        {section.title}
      </Text>
    </View>
  );

  const renderGroupRedirectList = (groups: Group[]) => {
    const sections = groupRedirectSections ?? groupsToSections(groups);
    return (
      <SectionList
        sections={sections}
        keyExtractor={keyExtractor}
        contentContainerStyle={[styles.groupContainer, contentStyle]}
        renderSectionHeader={sectionListHeader}
        renderItem={renderRedirectItem}
        ListFooterComponent={renderBottomTip()}
        initialNumToRender={INIT_RENDER_NUM}
        windowSize={WINDOW_SIZE}
        removeClippedSubviews={true}
        getItemLayout={sectionListLayoutRedirect}
        stickySectionHeadersEnabled={false}
      />
    );
  };

  const renderGroupCheckboxList = (groups: Group[]) => {
    const sections =
      groupCheckboxSections ?? groupsToCheckboxSections(groups, styles);
    return (
      <SectionList
        sections={sections}
        keyExtractor={keyExtractor}
        contentContainerStyle={[styles.groupContainer, contentStyle]}
        renderSectionHeader={sectionListHeader}
        renderItem={renderCheckboxItem}
        ListFooterComponent={renderBottomTip()}
        initialNumToRender={INIT_RENDER_NUM}
        windowSize={WINDOW_SIZE}
        removeClippedSubviews={true}
        getItemLayout={sectionListLayoutCheckbox}
        stickySectionHeadersEnabled={false}
      />
    );
  };

  const renderGroups = (groups: Group[]) => {
    return type === Type.redirect
      ? renderGroupRedirectList(groups)
      : renderGroupCheckboxList(groups);
  };
  const renderContent = () => {
    if (loading) {
      return (
        <View style={[styles.loadingWrapper, { minHeight }]}>
          <Loading size="large" loadingType="dot" />
        </View>
      );
    }
    if (options.length === 0) {
      return (
        <View style={styles.emptyNoDataContainer}>
          <ErrorBlock
            title={dataEmptyText || locale.Select.empty}
            status="empty"
          />
        </View>
      );
    }

    if (filteredOptions.length === 0) {
      return (
        <View style={styles.emptySearchContainer}>
          <ErrorBlock
            title={searchEmptyText || locale.Select.empty}
            status="empty"
          />
        </View>
      );
    }

    if (isGroup(filteredOptions as Group[])) {
      return renderGroups(filteredOptions as Group[]);
    }

    return renderNonGroupedList(filteredOptions as Option[]);
  };

  const onChangeSearch = (data: string) => {
    if (isNil(data)) {
      data = '';
    }
    setSearchValue(data);

    visible && onSearch?.(data);
  };

  const onClosed = () => {
    setSearchValue('');
    searchRef.current?.clear();
    searchRef.current?.blur();
    resetProps?.onClosed?.();
  };

  const renderHeader = () => {
    return (
      <ShouldRender condition={showSearch}>
        <View style={styles.searchContainer}>
          <Input
            placeholder={locale.Select.placeholder}
            style={styles.searchInput}
            onChange={onChangeSearch}
            prefix={
              <IconXSearchfor1
                size={token['--font-size-3']}
                fill={token['--color-text-5']}
                fillColor={token['--color-text-5']}
              />
            }
            ref={searchRef}
            {...searchInputProps}
          />
        </View>
      </ShouldRender>
    );
  };

  // select 有 search 时，默认为最大值
  const floatingLayerHeight =
    showSearch && !containerHeight ? maxHeight : containerHeight;

  return (
    <FloatingLayer
      cancelBtnStyle={styles.cancelBtnStyle}
      confirmBtnStyle={styles.confirmBtnStyle}
      showConfirmButton={showConfirmButton}
      title={title}
      contentStyle={styles.contentStyle}
      visible={visible}
      onPressOverlay={onPressOverlay}
      onConfirm={onConfirmFn}
      onCancel={onCancel}
      onClosed={onClosed}
      softInputMode="pan"
      presentInCurrentWindow={false}
      needScrollView={false}
      hasMinHeight
      adaptKeyboardBottom
      footerStyle={styles.footerStyle}
      containerHeight={floatingLayerHeight}
      ref={floatingLayerRef}
      footer={
        !((type === Type.checkbox && showFooter) || customFooter) ? null : (
          <>
            <ShouldRender condition={type === Type.checkbox && showFooter}>
              <Button style={styles.btn} onPress={onConfirmFn}>
                {locale.Select.footerConfirmButtonText}
              </Button>
            </ShouldRender>
            <ShouldRender condition={!!customFooter}>
              {customFooter}
            </ShouldRender>
          </>
        )
      }
      headerExtra={renderHeader()}
      {...omit(resetProps, 'onClosed')}
    >
      {renderContent()}
      {extra}
    </FloatingLayer>
  );
};

export default React.memo(Select);