feat: adds status filter for tv shows (#796)

re #605

Co-authored-by: JoaquinOlivero <joaquin.olivero@hotmail.com>

src/components/Selector/index.tsx

@@ -33,6 +33,13 @@ const messages = defineMessages('components.Selector', {
   nooptions: 'No results.',
   showmore: 'Show More',
   showless: 'Show Less',
+  searchStatus: 'Select status...',
+  returningSeries: 'Returning Series',
+  planned: 'Planned',
+  inProduction: 'In Production',
+  ended: 'Ended',
+  canceled: 'Canceled',
+  pilot: 'Pilot',
 });
 
 type SingleVal = {
@@ -204,6 +211,75 @@ export const GenreSelector = ({
   );
 };
 
+export const StatusSelector = ({
+  isMulti,
+  defaultValue,
+  onChange,
+}: BaseSelectorMultiProps | BaseSelectorSingleProps) => {
+  const intl = useIntl();
+  const [defaultDataValue, setDefaultDataValue] = useState<
+    { label: string; value: number }[] | null
+  >(null);
+
+  const options = useMemo(
+    () => [
+      { name: intl.formatMessage(messages.returningSeries), id: 0 },
+      { name: intl.formatMessage(messages.planned), id: 1 },
+      { name: intl.formatMessage(messages.inProduction), id: 2 },
+      { name: intl.formatMessage(messages.ended), id: 3 },
+      { name: intl.formatMessage(messages.canceled), id: 4 },
+      { name: intl.formatMessage(messages.pilot), id: 5 },
+    ],
+    [intl]
+  );
+
+  useEffect(() => {
+    const loadDefaultStatus = async (): Promise<void> => {
+      if (!defaultValue) {
+        return;
+      }
+      const statuses = defaultValue.split('|');
+
+      const statusData = options
+        .filter((opt) => statuses.find((s) => Number(s) === opt.id))
+        .map((o) => ({
+          label: o.name,
+          value: o.id,
+        }));
+
+      setDefaultDataValue(statusData);
+    };
+
+    loadDefaultStatus();
+  }, [defaultValue, options]);
+
+  const loadStatusOptions = async () => {
+    return options
+      .map((result) => ({
+        label: result.name,
+        value: result.id,
+      }))
+      .filter(({ label }) => label.toLowerCase());
+  };
+
+  return (
+    <AsyncSelect
+      key={`status-select-${defaultDataValue}`}
+      className="react-select-container"
+      classNamePrefix="react-select"
+      defaultValue={isMulti ? defaultDataValue : defaultDataValue?.[0]}
+      defaultOptions
+      isMulti={isMulti}
+      loadOptions={loadStatusOptions}
+      placeholder={intl.formatMessage(messages.searchStatus)}
+      onChange={(value) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onChange(value as any);
+      }}
+    />
+  );
+};
+
 export const KeywordSelector = ({
   isMulti,
   defaultValue,