import React from 'react';
import { useRouter } from 'next/router';
import { Add } from '@mui/icons-material';

import { colorList, getImportsString, getKeyByState, getPropsString } from '../helpers';

import Playground from '../Playground/Playground';
import { Fab } from '@/mui/components';

function FabSection() {
  const router = useRouter();

  return (
    <Playground
      title="FAB"
      initialState={[
        {
          type: 'select',
          stateId: 'color',
          options: colorList,
          selected: 'primary',
        },
        {
          type: 'select',
          stateId: 'size',
          options: ['small', 'medium', 'large'],
          selected: 'medium',
        },
        {
          type: 'select',
          stateId: 'variant',
          options: ['circular', 'extended'],
          selected: 'circular',
        },
        {
          type: 'checkbox',
          stateId: 'href',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'disableRipple',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'disableFocusRipple',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'disabled',
          selected: false,
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
          href: state.href ? router.pathname : null,
        };
        const importsList = getImportsString([[['Fab']]]);
        return {
          component: (
            <Fab key={getKeyByState(state)} {...props}>
              <Add />
            </Fab>
          ),
          code: `${importsList}
<Fab${getPropsString(props)}/>`,
        };
      }}
    />
  );
}

export default FabSection;
