import * as React from 'react';
import { Button, IButtonComponent } from '@uifabric/experiments';
import { Customizer, IStackProps, Stack } from 'office-ui-fabric-react';

const stackProps: IStackProps = { tokens: { childrenGap: 16 }, padding: 8, maxWidth: 400 };

const ButtonTheme = {
  scopedSettings: {
    Icon: {
      styles: {
        root: {
          fontSize: 24,
          color: 'purple',
        },
      },
    },
    Text: {
      styles: {
        root: {
          color: 'purple',
        },
      },
    },
  },
};

const getButtonStyles: IButtonComponent['styles'] = {
  icon: ButtonTheme.scopedSettings.Icon.styles.root,
  content: ButtonTheme.scopedSettings.Text.styles.root,
};

export class SlotsStyledExample extends React.Component<{}, {}> {
  public render(): JSX.Element {
    return (
      <Stack>
        <Stack {...stackProps}>
          <Button
            icon={{ iconName: 'share', style: ButtonTheme.scopedSettings.Icon.styles.root }}
            content="Icon as IIconProps with style"
          />
          <Button
            icon="share"
            content={{ children: 'Text as ITextProps with styles', styles: ButtonTheme.scopedSettings.Text.styles }}
          />
          <Button
            icon={{ iconName: 'share', style: { color: 'red' } }}
            styles={getButtonStyles}
            content="Button styles prop"
          />
          <Customizer {...ButtonTheme}>
            <Button icon="share" content="Button scopedSettings" />
          </Customizer>
        </Stack>
      </Stack>
    );
  }
}