import type { CSSProperties } from 'react';
import React, { useCallback } from 'react';
import { VisuallyHidden } from 'react-aria';
import { Button as RACButton } from 'react-aria-components';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { Button } from '../../Button/Button';
import { FormRow } from '../../FormRow/FormRow';
import { Grid } from '../../Grid/Grid';
import { PasswordInput } from '../../Inputs/PasswordInput/PasswordInput';
import { getTextInputClassName } from '../../Inputs/TextInput/TextInput';
import { Spacer } from '../../Spacer/Spacer';

import type { InputDialogProps } from './InputDialog';
import { InputDialog } from './InputDialog';

const meta: Meta<typeof InputDialog> = {
  title: 'UI kit/Form/Inputs/InputDialog',
  component: InputDialog,
  tags: ['autodocs'],
  argTypes: {
    children: { control: { disable: true } },
    trigger: { control: { disable: true } },
  },
};

export default meta;
type Story = StoryObj<typeof InputDialog>;

const triggerAsInputOverrideStyle: CSSProperties = {
  minWidth: '220px',
  textTransform: 'unset',
  textAlign: 'left',
};
const triggerAsInputPlaceholderStyle: CSSProperties = {
  color: 'var(--colors-foregrounds-content-tertiary) !important',
};

function ExampleDialogInput(args: InputDialogProps) {
  const [value, setValue] = React.useState('');
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <FormRow label={args.label as string}>
      <InputDialog
        {...args}
        isOpen={isOpen}
        onOpenChange={setIsOpen}
        trigger={
          <RACButton
            onPress={() => setIsOpen(true)}
            className={getTextInputClassName({ error: undefined, warning: undefined, width: undefined })}
            style={{
              ...triggerAsInputOverrideStyle,
              ...(value ? {} : triggerAsInputPlaceholderStyle),
            }}
          >
            {value.replaceAll(/\w/g, '•') || 'Enter value...'}
          </RACButton>
        }
        label={args.label}
        closeButtonLabel={args.closeButtonLabel}
      >
        <InputDialog.Divider />
        <InputDialog.Input>
          <PasswordInput
            label='Password input'
            disabled
            value={value}
            style={{ textAlign: 'center', width: '100%' }}
            readOnly
          />
        </InputDialog.Input>
        <InputDialog.Body>
          <InputDialog.BodyInner>
            <Spacer size='lg' />
            <Grid responsive={false} columns={3} gap='lg'>
              <Button onClick={useCallback(() => setValue(value => `${value}1`), [])} variant='primary' size='lg'>
                1
              </Button>
              <Button onClick={useCallback(() => setValue(value => `${value}2`), [])} variant='primary' size='lg'>
                2
              </Button>
              <Button onClick={useCallback(() => setValue(value => `${value}3`), [])} variant='primary' size='lg'>
                3
              </Button>

              <Button onClick={useCallback(() => setValue(value => `${value}4`), [])} variant='primary' size='lg'>
                4
              </Button>
              <Button onClick={useCallback(() => setValue(value => `${value}5`), [])} variant='primary' size='lg'>
                5
              </Button>
              <Button onClick={useCallback(() => setValue(value => `${value}6`), [])} variant='primary' size='lg'>
                6
              </Button>

              <Button onClick={useCallback(() => setValue(value => `${value}7`), [])} variant='primary' size='lg'>
                7
              </Button>
              <Button onClick={useCallback(() => setValue(value => `${value}8`), [])} variant='primary' size='lg'>
                8
              </Button>
              <Button onClick={useCallback(() => setValue(value => `${value}9`), [])} variant='primary' size='lg'>
                9
              </Button>

              <Spacer />

              <Button onClick={useCallback(() => setValue(value => `${value}0`), [])} variant='primary' size='lg'>
                0
              </Button>

              <Button
                onClick={useCallback(() => setValue(value => `${value.slice(0, Math.max(0, value.length - 1))}`), [])}
                variant='secondary'
                size='lg'
                iconLeft='shp-arrow-left'
              >
                <VisuallyHidden>Backspace</VisuallyHidden>
              </Button>
            </Grid>
          </InputDialog.BodyInner>
        </InputDialog.Body>
      </InputDialog>
    </FormRow>
  );
}

export const Default: Story = {
  args: {
    label: 'PIN',
  },
  render: ExampleDialogInput,
};