import {
  ForwardedRef,
  forwardRef,
  useCallback,
  useEffect,
  useState,
} from 'react';

import config from './styles/component-values-segment-control.module.css';
import styles from './styles/rt-segment-control.module.css';
import segmentConfig from './rt-segment/styles/component-values-segment.module.css';
import segmentStyles from './rt-segment/styles/rt-segment.module.css';

import classnames from 'classnames/bind';
import { RtSegmentControlProps } from './types/rt-segment-control.types';
import { RtSegment } from './rt-segment/rt-segment';
import { useRtBaseProps } from '@dpa/react-hoc';

import { RtSlidePanel } from '@dpa/react-slide-panel';
import { RtFrame } from '@dpa/react-frame-intro';
import { useGridChild } from '@dpa/react-grid';
import { RtSegmentConfig } from './rt-segment/types/rt-segment.types';

const cn = classnames.bind(styles);
const segmentCn = classnames.bind(segmentStyles);

export const RtSegmentControl = forwardRef(
  (props: RtSegmentControlProps, ref: ForwardedRef<HTMLDivElement>) => {
    const {
      segments,
      size = 'md',
      radius = 'primary',
      direction = 'horizontal',
      use = 'generic',
      modifier = 'base',
      surface = 'foundation-low-tint',
      grow = false,
      activeUse = 'cloudy',
      childUse = use,
      activeId: propActiveId,
      bgTransparent,
      onActiveChange,
      isResettable = false,
    } = props;
    const baseProps = useRtBaseProps(props, '0.2.2');

    const [activeId, setActiveId] = useState(propActiveId);

    useEffect(() => {
      setActiveId(propActiveId);
    }, [propActiveId]);

    function handleOnChange(segment: RtSegmentConfig | null) {
      setActiveId(segment?.id);
      onActiveChange?.(segment);
    }

    const { gridChildClassname, gridAttributes } = useGridChild({
      size,
      radius,
    });

    return (
      <RtFrame
        ref={ref}
        as="div"
        surfaceState="native"
        modifier={modifier}
        use={use}
        surface={surface}
        isFontSizeProvider
        className={cn(
          gridChildClassname,
          config[`rt-segment-control-${size}`],
          segmentConfig[`rt-segment-${size}`],
          'rt-segment-control',
          `rt-segment-control--${direction}`,
          { 'rt-segment-control-grow': grow }
        )}
        bgTransparent={bgTransparent}
        {...gridAttributes}
        {...baseProps}
      >
        <RtSlidePanel
          use={activeUse}
          direction={direction}
          activeId={activeId}
          slidePanelClassName={segmentCn(`rt-segment-${radius}`)}
          isResettable={isResettable}
          onActiveChange={(id) => {
            const active = segments.find((s) => s.id === id) || null;
            handleOnChange(active);
          }}
        >
          {segments.map((segmentProps) => (
            <RtSegment
              key={segmentProps.id}
              use={childUse}
              activeUse={activeUse}
              size={size}
              radius={radius}
              grow={grow}
              active={segmentProps.id === activeId}
              {...segmentProps}
            />
          ))}
        </RtSlidePanel>
      </RtFrame>
    );
  }
);