import type { FC } from 'react';

import { AddonTypes } from '~/lib/songwhipApi/types';
import InputLabel from '~/src/components/InputLabel';
import { Select } from '~/src/components/Select2';
import { useI18n } from '~/src/lib/i18n';
import { useItemContext } from '../../ItemPageContext';
import { useEditActions } from '../../ItemPageEdit/useEditActions';

export const DesktopTwoColumnLayoutSettings: FC<{ margin: string }> = ({
  margin,
}) => {
  const { setAddon } = useEditActions();
  const itemContext = useItemContext();
  const { t } = useI18n('itemEdit');

  const layoutSettings = itemContext.layout.settings;
  const alignContent = layoutSettings.desktopTwoColumn.alignContent;
  const userLayoutSettings = itemContext.addons[AddonTypes.LAYOUT_SETTINGS];

  return (
    <>
      <InputLabel
        value={t('layoutSettings.desktop.alignment.title')}
        description={t('layoutSettings.desktop.alignment.description')}
        margin={margin}
      >
        <Select
          width="100%"
          value={alignContent}
          testId="desktopTwoColumnAlignContentSelect"
          onChange={({ value }) => {
            setAddon(AddonTypes.LAYOUT_SETTINGS, {
              ...userLayoutSettings,

              desktopTwoColumn: {
                ...userLayoutSettings?.desktopTwoColumn,
                alignContent: value,
              },
            });
          }}
          options={[
            {
              text: t('layoutSettings.desktop.alignment.left'),
              id: 'left' as const,
            },
            {
              text: t('layoutSettings.desktop.alignment.right'),
              id: 'right' as const,
            },
          ]}
        />
      </InputLabel>
    </>
  );
};