import { argsToTemplate, Meta, StoryObj } from '@storybook/angular';
import { SwitchComponent } from '../../public-api';

type SwitchComponentWithLabels = SwitchComponent & {
  leftLabel: string;
  rightLabel: string;
};

/**
 * Deprecated `nj-switch` component, please use `nj-segmented-control` component instead.
 * If you still want to use this component you need to import some styles from `@engie-group/fluid-4-deprecated`.
 * You need to import the deprecated tokens `@engie-group/fluid-4-deprecated/tokens/lib/css/tokens.css`
 */
const meta: Meta<SwitchComponentWithLabels> = {
  title: 'Deprecated/Switch',
  id: 'switch',
  component: SwitchComponent,
  parameters: {
    docs: {
      imports: [SwitchComponent]
    }
  },
  argTypes: {
    leftLabel: {
      description:
        'Note that this is not an `@Input()`, it should be placed inside `<nj-switch>`. This can be any custom content'
    },
    rightLabel: {
      description:
        'Note that this is not an `@Input()`, it should be placed inside `<nj-switch>`. This can be any custom content'
    },
    values: {
      control: {
        type: null
      }
    },
    id: {
      control: {
        type: null
      }
    },
    name: {
      control: {
        type: null
      }
    },
    title: {
      control: {
        type: null
      }
    },
    ariaLabel: {
      control: {
        type: null
      }
    },
    ariaLabelledBy: {
      control: {
        type: null
      }
    },
    valueChange: {
      control: {
        type: null
      }
    }
  }
};

export default meta;

type Story = StoryObj<SwitchComponentWithLabels>;

export const Switch: Story = {
  args: {
    leftLabel: 'EURO',
    rightLabel: 'kwh',
    values: {
      left: 'EURO',
      right: 'kwh'
    }
  },
  render: (args) => ({
    props: args,
    template: `
      <nj-switch ${argsToTemplate(args, { exclude: ['leftLabel', 'rightLabel'] })}>
          <span left-label>{{leftLabel}}</span>
          <span right-label>{{rightLabel}}</span>
      </nj-switch>
    `
  })
};