import * as stylex from '@stylexjs/stylex';

import { useI18n } from '~/src/lib/i18n';
import { Layout } from '~/src/ui/layouts/layout';
import { Button } from '~/src/ui/primitives/button';
import { FormInputControl } from './FormInput';
import { FormLabel } from './FormLabel';
import { FormCustomField } from './types';

const styles = stylex.create({
  span: {
    gridColumn: 'span 12',
  },
});

interface FormLabelValueProps extends FormCustomField {
  onRemove?: () => void;
}

export const FormLabelValue = (props: FormLabelValueProps) => {
  const { t } = useI18n();
  const { name, label, defaultValue, onRemove } = props;

  const parsedValue: { label: string; value: string } =
    typeof defaultValue === 'object' && defaultValue !== null
      ? (defaultValue as { label: string; value: string })
      : { label: '', value: '' };

  return (
    <Layout column gap="5" style={styles.span}>
      <Layout gap="5" align="center" justify="space-between">
        {label && <FormLabel label={label} name={name} />}
        {onRemove && (
          <Button variant="text-danger" onClick={onRemove}>
            {t('app.actions.remove')}
          </Button>
        )}
      </Layout>
      <Layout gap="5">
        <FormInputControl
          name={`${name}.label`}
          placeholder="Label"
          label="Label"
          type="text"
          required
          defaultValue={parsedValue.label}
        />
        <FormInputControl
          name={`${name}.value`}
          placeholder="Value"
          label="Value"
          type="text"
          required
          defaultValue={parsedValue.value}
        />
      </Layout>
    </Layout>
  );
};