import React from "react"
import SelectMenu from "../../select-menu"
import MultiSelect from "../../multiselect"

function View({ filter }) {
  return (
    <>
      <div className="uppercase text-gray-700">Subscribed to the</div>
      <div className="uppercase text-gray-700">{filter.subscribable_type}</div>
    </>
  )
}

const subscribableTypeOptions = [
  { value: "landing_page", label: "forms" },
  { value: "course", label: "sequences" },
  { value: "tag", label: "tags" },
  { value: "product", label: "products" },
]

// TODO: load from context
const subscribableOptions = [
  { value: 1, label: "Form 1" },
  { value: 2, label: "Form 2" },
  { value: 3, label: "Form 3" },
  { value: 4, label: "Form 4" },
  { value: 5, label: "Form 5" },
  { value: 6, label: "Form 6" },
  { value: 7, label: "Form 7" },
  { value: 8, label: "Form 8" },
  { value: 9, label: "Form 9" },
  { value: 10, label: "Form 10" },
  { value: 11, label: "Form 11" },
  { value: 12, label: "Form 12" },
  { value: 13, label: "Form 13" },
]

export default {
  View,
  Edit: ({ filter, setFilter }) => {
    const handleChange = event => {
      const { name, value } = event.target
      setFilter({ ...filter, [name]: value })
    }

    return (
      <div>
        <SelectMenu
          className="w-full mt-2"
          name="subscribable_type"
          onChange={handleChange}
          value={filter.subscribable_type}
          options={subscribableTypeOptions}
        />
        <MultiSelect
          className="w-full mt-2"
          name="subscribable_ids"
          onChange={handleChange}
          value={filter.subscribable_ids || []}
          options={subscribableOptions}
        />
      </div>
    )
  },
  icon: () => "",
  label: () => "subscribed to",
  defaults: { subscribable_type: "form" },
}
