import {
  SimpleForm,
  Create,
  FormDataConsumer,
  SelectInput,
  BooleanInput,
  ReferenceInput,
  required,
  CreateProps,
} from "react-admin";
import TwilioLanguages from "./twilio-languages";
import {
  PromptInput,
  VoiceInput,
  AvailableNumbersInput,
  populateNumber,
} from "./shared";
import MicInput from "./MicInput";

const VoiceLineCreate = (props: CreateProps) => (
  <Create {...props} title="Create Voice Line" transform={populateNumber}>
    <SimpleForm>
      <ReferenceInput
        label="Provider"
        source="providerId"
        reference="voiceProviders"
        validate={[required()]}
      >
        <SelectInput optionText={(p) => `${p.kind}: ${p.name}`} />
      </ReferenceInput>
      <FormDataConsumer subscription={{ values: true }}>
        {AvailableNumbersInput}
      </FormDataConsumer>
      <SelectInput
        source="language"
        choices={TwilioLanguages.languages}
        validate={[required()]}
      />
      <FormDataConsumer subscription={{ values: true }}>
        {VoiceInput}
      </FormDataConsumer>

      <FormDataConsumer subscription={{ values: true }}>
        {PromptInput}
      </FormDataConsumer>
      <BooleanInput source="audioPromptEnabled" />
      <MicInput source="promptAudio" />
    </SimpleForm>
  </Create>
);

export default VoiceLineCreate;