import React, { useState } from 'react';
import { InfoOutlined } from '@mui/icons-material';

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

import Playground from '../Playground/Playground';
import { Box, Tab, Tabs, Tooltip } from '@/mui/components';
import {
  CustomCommentsOutlined,
  CustomDeepSearchOutlined,
  CustomHighlightsOutlined,
  CustomPlaylistOutlined,
  CustomSlidesOutlined,
} from '@/mui/components/CustomIcon';

function TabSection() {
  const [value, setValue] = useState(0);

  return (
    <>
      <Playground
        title="Tabs"
        initialState={[
          {
            type: 'select',
            stateId: 'size',
            options: ['small', 'medium'],
            selected: 'medium',
          },
          {
            type: 'select',
            stateId: 'orientation',
            options: ['horizontal', 'vertical'],
            selected: 'horizontal',
          },
          {
            type: 'select',
            stateId: 'iconPosition',
            options: ['start', 'end'],
            selected: 'start',
          },
          {
            type: 'checkbox',
            stateId: 'withIcon',
            selected: true,
          },
          {
            type: 'checkbox',
            stateId: 'withText',
            selected: true,
          },
          {
            type: 'checkbox',
            stateId: 'equalWidth',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'emulateNoEnoughSpace',
            selected: false,
          },
        ]}
        renderCallback={(state) => {
          let limitWidth = null;
          let limitHeight = null;

          if (state.emulateNoEnoughSpace) {
            if (state.orientation === 'vertical') {
              limitHeight = '200px';
            } else {
              limitWidth = '300px';
            }
          }

          const props = omitUndefinedProps({
            ...state,
            iconPosition: undefined,
            withIcon: undefined,
            withText: undefined,
            emulateNoEnoughSpace: undefined,
            value,
            onChange: (event, newValue) => setValue(newValue),
          });

          const tabs = [
            {
              label: 'Playlist',
              Icon: CustomPlaylistOutlined,
              iconName: 'CustomPlaylistOutlined',
            },
            {
              label: 'Deep Search',
              Icon: CustomDeepSearchOutlined,
              iconName: 'CustomDeepSearchOutlined',
            },
            {
              label: 'Comments',
              Icon: CustomCommentsOutlined,
              iconName: 'CustomCommentsOutlined',
            },
            {
              label: 'Highlights',
              Icon: CustomHighlightsOutlined,
              iconName: 'CustomHighlightsOutlined',
            },
            {
              label: 'Slides',
              Icon: CustomSlidesOutlined,
              iconName: 'CustomSlidesOutlined',
            },
          ];

          const importsList = getImportsString([[['Tabs', 'Tab']]]);

          const tabsString = tabs.map(({ label, iconName }, index) => {
            const tab = index === 0 ? '  ' : '    ';

            return `${tab}<Tab${getPropsString({
              label: state.withText ? label : undefined,
              icon: state.withIcon ? `!!!<${iconName} />` : undefined,
              iconPosition: state.iconPosition === 'start' ? undefined : state.iconPosition,
            })}/>`;
          });

          return {
            component: (
              <Box
                sx={{
                  width: limitWidth,
                  height: limitHeight,
                }}
              >
                <Tabs {...props}>
                  {tabs.map(({ label, Icon }) => (
                    <Tab
                      key={label}
                      label={state.withText ? label : undefined}
                      icon={state.withIcon ? <Icon /> : null}
                      iconPosition={state.iconPosition}
                    />
                  ))}
                </Tabs>
              </Box>
            ),
            code: `${importsList}
<Tabs${getPropsString(props)}>
  ${tabsString.join('\n')}
</Tabs>`,
          };
        }}
      />
      <Playground
        title="Tab Customization"
        initialState={[]}
        renderCallback={() => {
          const importsList = getImportsString([[['Tabs', 'Tab']]]);

          return {
            component: (
              <Tabs value={value} onChange={(event, newValue) => setValue(newValue)}>
                <Tab
                  color="error"
                  label="Custom Tab"
                  icon={
                    <Tooltip
                      title="The AI-powered video management platform for customer-facing
                        communications that converts traditional video into
                        intelligent content that is fully enabled—searchable,
                         measurable, personalized, merchandised and interactive."
                      placement="top"
                    >
                      <InfoOutlined htmlColor="info.main" />
                    </Tooltip>
                  }
                  iconPosition="end"
                />
                <Tab label="Selected Tab" icon={<CustomDeepSearchOutlined />} iconPosition="end" />
              </Tabs>
            ),
            code: `${importsList}
<Tabs value={value} onChange={(event, newValue) => setValue(newValue)}>
  <Tab
    color="error"
    label="Custom Tab"
    icon={(
      <Tooltip
        title="The AI-powered video management platform for customer-facing
          communications that converts traditional video into
          intelligent content that is fully enabled—searchable,
           measurable, personalized, merchandised and interactive."
        placement="top"
      >
        <InfoOutlined htmlColor="info.main" />
      </Tooltip>
      )}
    iconPosition="end"
  />
  <Tab
    label="Selected Tab"
    icon={<CustomDeepSearchOutlined />}
    iconPosition="end"
  />
</Tabs>`,
          };
        }}
      />
    </>
  );
}

export default TabSection;
