import React from 'react';

import { getImportsString, getPropsString } from '../helpers';
import { omitUndefinedProps } from '@/mui/helpers';

import Playground from '../Playground/Playground';
import { Button, Tooltip } from '@/mui/components';
import { maxWidthMapping } from '@/mui/components/Tooltip/Tooltip.api';

const text =
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's";

const sizes = Object.entries(maxWidthMapping)
  .sort(([, aValue], [bValue]) => bValue - aValue)
  .map(([key]) => key);

function TooltipSection() {
  return (
    <Playground
      title="Tooltip"
      initialState={[
        {
          type: 'select',
          stateId: 'placement',
          options: [
            'bottom-end',
            'bottom-start',
            'bottom',
            'left-end',
            'left-start',
            'left',
            'right-end',
            'right-start',
            'right',
            'top-end',
            'top-start',
            'top',
          ],
          selected: 'top',
        },
        {
          type: 'select',
          stateId: 'maxWidth',
          options: sizes,
          selected: sizes[0],
        },
        {
          type: 'input-text',
          stateId: 'title',
          selected: text,
        },
        {
          type: 'input-number',
          stateId: 'enterDelay',
          selected: 100,
        },
        {
          type: 'input-number',
          stateId: 'leaveDelay',
          selected: 0,
        },
        {
          type: 'checkbox',
          stateId: 'arrow',
          selected: true,
        },
        {
          type: 'checkbox',
          stateId: 'open',
          selected: false,
        },
      ]}
      renderCallback={(state) => {
        const props = omitUndefinedProps({
          ...state,
          open: state.open || undefined,
        });

        return {
          component: (
            <Tooltip {...props}>
              <Button color="primary" variant="text">
                Text with Tooltip
              </Button>
            </Tooltip>
          ),
          code: `${getImportsString([[['Tooltip']]])}
<Tooltip${getPropsString(props)}>
  <Button variant="text">
    Text with Tooltip
  </Button>
</Tooltip>`,
        };
      }}
    />
  );
}

export default TooltipSection;
