import { Checkbox } from '@ankhorage/surface';
import React from 'react';

import type { CheckboxGroupOption, CheckboxGroupProps } from '../../../../../types/checkbox';
import { View } from '../../../../layout/public';
import { withZoraThemeScope } from '../../../../theme/adapters/inbound/withZoraThemeScope';
import { Text } from '../../../../typography/public';

function CheckboxGroupInner<TValue extends string>({
  themeId: _themeId,
  mode: _mode,
  value,
  onValueChange,
  options,
  orientation = 'vertical',
  gap = 's',
  color = 'primary',
  size = 'm',
  invalid = false,
  readOnly = false,
  disabled = false,
  testID,
  interactionPolicy,
}: CheckboxGroupProps<TValue>) {
  const selectedValues = new Set(value);
  const isHorizontal = orientation === 'horizontal';

  return (
    <View
      testID={testID}
      style={{
        flexDirection: isHorizontal ? 'row' : 'column',
        flexWrap: isHorizontal ? 'wrap' : 'nowrap',
      }}
    >
      <View
        direction={isHorizontal ? 'row' : 'column'}
        gap={gap}
        wrap={isHorizontal ? 'wrap' : 'nowrap'}
      >
        {options.map((option) => (
          <CheckboxGroupItem
            key={option.value}
            option={option}
            checked={selectedValues.has(option.value)}
            disabled={disabled || option.disabled === true}
            invalid={invalid}
            readOnly={readOnly}
            size={size}
            color={color}
            value={value}
            onValueChange={onValueChange}
            interactionPolicy={interactionPolicy}
          />
        ))}
      </View>
    </View>
  );
}

/***
 * Renders a group of checkboxes for multi-select values.
 */
export const CheckboxGroup = withZoraThemeScope(CheckboxGroupInner);

function CheckboxGroupItem<TValue extends string>({
  option,
  checked,
  disabled,
  invalid,
  readOnly,
  size,
  color,
  value,
  onValueChange,
  interactionPolicy,
}: {
  option: CheckboxGroupOption<TValue>;
  checked: boolean;
  disabled: boolean;
  invalid: boolean;
  readOnly: boolean;
  size: NonNullable<CheckboxGroupProps<TValue>['size']>;
  color: NonNullable<CheckboxGroupProps<TValue>['color']>;
  value: readonly TValue[];
  onValueChange: (value: TValue[]) => void;
  interactionPolicy: CheckboxGroupProps<TValue>['interactionPolicy'];
}) {
  const passive = interactionPolicy === 'passive';

  return (
    <Checkbox
      interactionPolicy={interactionPolicy}
      checked={checked}
      disabled={disabled}
      invalid={invalid}
      readOnly={readOnly}
      size={size}
      color={color}
      testID={option.testID}
      onCheckedChange={(nextChecked) => {
        if (passive) return;
        const nextValue = nextChecked
          ? [...value, option.value]
          : value.filter((currentValue) => currentValue !== option.value);

        onValueChange(nextValue);
      }}
    >
      <View gap="xs">
        <Text>{option.label}</Text>
        {option.description ? (
          <Text emphasis="muted" variant="caption">
            {option.description}
          </Text>
        ) : null}
      </View>
    </Checkbox>
  );
}